• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Swatch Group

Component status
Contribution
Last releasedApril 28, 2022
Current version@spectrum-css/swatchgroup@1.1.1

Usage notes


  • Grouped swatches must use the .spectrum-Swatch--roundingNone class to help minimize the Hermann grid illusion
  • Swatches with a color that have a contrast ratio of less than 3:1 should have .spectrum-Swatch--lightBorder class, otherwise, it should have the .spectrum-Swatch--noBorder class

Variants


Density - Compact
Verified

Show markup
<div class="spectrum-SwatchGroup spectrum-SwatchGroup--compact" style="width: 200px">
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(22, 135, 140)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(33, 132, 113)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 132, 152)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 127, 96)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 209, 24)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(120, 91, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(225, 234, 119)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 225, 171)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(248, 239, 187)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 205, 215)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(212, 182, 237)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(153, 219, 244)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(171, 238, 221)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(187, 182, 175)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(238, 211, 190)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 143, 242)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(60, 49, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 71, 144)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
</div>

Density - Regular
Verified

Show markup
<div class="spectrum-SwatchGroup" style="width: 200px">
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(22, 135, 140)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(33, 132, 113)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 132, 152)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 127, 96)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 209, 24)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(120, 91, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(225, 234, 119)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 225, 171)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(248, 239, 187)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 205, 215)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(212, 182, 237)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(153, 219, 244)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(171, 238, 221)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(187, 182, 175)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(238, 211, 190)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 143, 242)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(60, 49, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 71, 144)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
</div>

Density - Spacious
Verified

Show markup
<div class="spectrum-SwatchGroup spectrum-SwatchGroup--spacious" style="width: 200px">
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(22, 135, 140)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(33, 132, 113)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 132, 152)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 127, 96)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 209, 24)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(120, 91, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(225, 234, 119)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 225, 171)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(248, 239, 187)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 205, 215)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(212, 182, 237)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(153, 219, 244)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(171, 238, 221)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(187, 182, 175)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(238, 211, 190)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 143, 242)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(60, 49, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 71, 144)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
</div>

Sizing
Verified

Use any size swatches as necessary.

Show markup
<div class="spectrum-SwatchGroup" style="width: 140px">
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(22, 135, 140)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(33, 132, 113)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 132, 152)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 127, 96)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 209, 24)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(120, 91, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(225, 234, 119)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 225, 171)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(248, 239, 187)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 205, 215)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(212, 182, 237)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(153, 219, 244)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(171, 238, 221)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(187, 182, 175)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(238, 211, 190)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(0, 143, 242)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(60, 49, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeS spectrum-Swatch--roundingNone spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 71, 144)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
</div>

Rounding - Regular
Verified

Only use rounded swatches if there is a single row.

Show markup
<div class="spectrum-SwatchGroup" style="width: 220px">
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(22, 135, 140)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(33, 132, 113)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 132, 152)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 127, 96)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 209, 24)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(120, 91, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
</div>

Rounding - Full
Verified

Only use rounded swatches if there is a single row.

Show markup
<div class="spectrum-SwatchGroup" style="width: 220px">
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingFull spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(22, 135, 140)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingFull spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(33, 132, 113)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingFull spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(254, 132, 152)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingFull spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 127, 96)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingFull spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(255, 209, 24)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
  <div class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingFull spectrum-Swatch--lightBorder" tabindex="0" style="--spectrum-picked-color: rgb(120, 91, 199)">
    <div class="spectrum-Swatch-fill"></div>
  </div>
</div>