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

Color loupe

Component status
Contribution
Current version@spectrum-css/colorloupe@5.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/colorloupe@6.0.0-s2-foundations.13
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 display the loupe
  • Color Loupe does not have a disabled style; do not show it when the handle its attached to is disabled.

Variants

Standard
Contribution

Show markup
<svg class="spectrum-ColorLoupe is-open" style="--spectrum-picked-color: rgba(255, 0, 0, 0.5); position: absolute; inset-block-start: 25%; inset-inline-start: 50%;">
  <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>