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

Color handle

Component status
Contribution
Current version@spectrum-css/colorhandle@8.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/colorhandle@9.0.0-s2-foundations.14
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

  • Set the --spectrum-picked-color custom property to the CSS color value you want to show
  • Apply .is-open to .spectrum-ColorLoupe display the loupe

Variants

Standard
Contribution

Show markup
<div class="spectrum-ColorHandle spectrum-OpacityCheckerboard" style="--spectrum-picked-color: rgba(255, 0, 0, 0.5); position: absolute; inset-block: 50%; inset-inline: 50%;">
  <div class="spectrum-ColorHandle-inner"></div>
</div>

Disabled
Contribution

Show markup
<div class="spectrum-ColorHandle spectrum-OpacityCheckerboard is-disabled" style="--spectrum-picked-color: rgba(255, 0, 0, 0.5); position: absolute; inset-block: 50%; inset-inline: 50%">
  <div class="spectrum-ColorHandle-inner"></div>
</div>

Open
Contribution

Show markup
<div class="spectrum-ColorHandle spectrum-OpacityCheckerboard" style="--spectrum-picked-color: rgba(255, 0, 0, 0.5); position: absolute; inset-block: 75%; inset-inline: 50%">
  <div class="spectrum-ColorHandle-inner"></div>
  <svg class="spectrum-ColorLoupe is-open">
    <defs>
      <path
        id="loupe-path"
        d="M 22 60 C 18.2 56 14.6 51.7 11.3 47.2 C 8.3 43.3 5.7 39.1 3.5 34.7 C 1.2 30 0 25.9 0 22.4 C 0 17.2 1.8 12.2 5 8.2 C 8.2 4.2 12.7 1.5 17.6 0.4 C 22.6 -0.6 27.8 0.2 32.3 2.6 C 36.8 5 40.3 8.9 42.3 13.7 C 43.4 16.4 44 19.4 44 22.4 C 44 25.9 42.8 30 40.5 34.7 C 38.3 39.1 35.7 43.3 32.7 47.3 C 29.4 51.7 25.8 56 22 60 Z"
        transform="translate(2, 2)"
      />
      <mask id="loupe-mask">
        <rect x="0" y="0" height="100" width="100" fill="white"/>
        <use xlink:href="#loupe-path" fill="black" />
      </mask>
      <pattern id="checkerboard-primary" patternUnits="userSpaceOnUse" width="16" height="16" class="spectrum-ColorLoupe-checkerboard-pattern">
        <rect x="0" y="0" width="8" height="8"/>
        <rect x="8" y="8" width="8" height="8"/>
      </pattern>
      <pattern id="checkerboard-secondary" patternUnits="userSpaceOnUse" width="20" height="20" class="spectrum-ColorLoupe-checkerboard-pattern">
        <rect x="0" y="0" width="10" height="10"/>
        <rect x="10" y="10" width="10" height="10"/>
      </pattern>
    </defs>
    <g>
      <use xlink:href="#loupe-path" class="spectrum-ColorLoupe-checkerboard-background" />
      <use xlink:href="#loupe-path" class="spectrum-ColorLoupe-checkerboard-fill" />
      <use xlink:href="#loupe-path" class="spectrum-ColorLoupe-inner-border" />
      <use xlink:href="#loupe-path" mask="url(#loupe-mask)" class="spectrum-ColorLoupe-outer-border" />
    </g>
  </svg>
</div>

Migration Guide

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.