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

Swatch group

Component status
Contribution
Current version@spectrum-css/swatchgroup@3.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/swatchgroup@4.0.0-s2-foundations.15
ReleasedOctober 4, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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
Contribution

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
Contribution

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
Contribution

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
Contribution

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
Contribution

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
Contribution

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>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.