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

Color Loupe

Component status
Verified
Last releasedJune 16, 2022
Current version@spectrum-css/colorloupe@2.0.8
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
Verified

Show markup
<svg class="spectrum-ColorLoupe is-open" style="--spectrum-picked-color: rgba(255, 0, 0, 0.5); position: absolute; top: 25%; left: 50%;">
  <defs>
    <path id="spectrum-inner-loupe" class="spectrum-ColorLoupe-inner" d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z" />
    <path id="express-inner-loupe" class="spectrum-ColorLoupe-inner" d="M-14330.692,18055.742A15.922,15.922,0,0,1-14334,18046a16,16,0,0,1,16-16,16,16,0,0,1,16,16,15.925,15.925,0,0,1-3.166,9.555c-.009.016-.018.029-.028.045-2.577,4.033-12.77,14.4-12.77,14.4S-14328.027,18059.484-14330.692,18055.742Z" />

    <g id="loupe-checkerboard">
      <g transform="translate(338 285)">
        <g transform="translate(-338 -285)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-322 -285)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-306 -285)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-290 -285)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-338 -269)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-322 -269)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-306 -269)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-290 -269)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-338 -253)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-322 -253)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-306 -253)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-290 -253)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-338 -237)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-322 -237)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-306 -237)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-290 -237)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-338 -221)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-322 -221)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-306 -221)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
        <g transform="translate(-290 -221)">
          <rect width="8" height="8" transform="translate(338 285)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
          <rect width="8" height="8" transform="translate(338 293)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 285)" fill="var(--spectrum-colorcontrol-checkerboard-light-color)" />
          <rect width="8" height="8" transform="translate(346 293)" fill="var(--spectrum-colorcontrol-checkerboard-dark-color)" />
        </g>
      </g>
    </g>

    <clipPath id="spectrum-loupe-clip">
      <use xlink:href="#spectrum-inner-loupe" />
    </clipPath>
    <clipPath id="express-loupe-clip">
      <use xlink:href="#express-inner-loupe" />
    </clipPath>
    <clipPath id="express-checkerboard-loupe-clip">
      <use xlink:href="#express-inner-loupe" transform="translate(14688 -17741)" />
    </clipPath>

    <filter id="loupe-shadow" x="-16px" y="-16px" width="96" height="128" filterUnits="userSpaceOnUse">
      <feOffset input="SourceAlpha" />
      <feGaussianBlur stdDeviation="2" result="d" />
      <feFlood flood-opacity="0.302" />
      <feComposite operator="in" in2="d" />
      <feComposite in="SourceGraphic" />
    </filter>
  </defs>

  <g transform="translate(4 4)" class="spectrum-ColorLoupe-spectrum">
    <g clip-path="url(#spectrum-loupe-clip)">
      <g transform="translate(-353.999 -289)">
        <use xlink:href="#loupe-checkerboard" />
      </g>
    </g>
    <g filter="url(#loupe-shadow)">
      <use xlink:href="#spectrum-inner-loupe" />
    </g>
    <path class="spectrum-ColorLoupe-outer" d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"/>
  </g>

  <g transform="translate(-290 -235)" class="spectrum-ColorLoupe-express">
    <g transform="translate(-58 -45)" clip-path="url(#express-checkerboard-loupe-clip)">
      <use xlink:href="#loupe-checkerboard" />
    </g>
    <g transform="matrix(1, 0, 0, 1, 290, 238)" filter="url(#loupe-shadow)">
      <g transform="translate(14340 -18024)">
        <use xlink:href="#express-inner-loupe" clip-path="url(#express-loupe-clip)" />
      </g>
    </g>
    <g transform="translate(14630 -17786)" fill="none">
      <path class="spectrum-ColorLoupe-outer" d="M -14317.9482421875 18067.111328125 C -14315.0771484375 18064.130859375 -14308.7626953125 18057.462890625 -14306.884765625 18054.529296875 L -14306.8466796875 18054.4609375 L -14306.76953125 18054.359375 C -14304.9580078125 18051.931640625 -14304.0009765625 18049.041015625 -14304.0009765625 18046 C -14304.0009765625 18042.26171875 -14305.45703125 18038.74609375 -14308.1025390625 18036.1015625 C -14310.7470703125 18033.45703125 -14314.2626953125 18032 -14318.0009765625 18032 C -14321.7392578125 18032 -14325.2548828125 18033.45703125 -14327.8994140625 18036.1015625 C -14330.544921875 18038.74609375 -14332.0009765625 18042.26171875 -14332.0009765625 18046 C -14332.0009765625 18049.115234375 -14331 18052.0625 -14329.107421875 18054.5234375 L -14329.0634765625 18054.58203125 C -14327.1025390625 18057.3359375 -14320.802734375 18064.087890625 -14317.9482421875 18067.111328125 M -14317.96484375 18070 C -14317.96484375 18070 -14328.02734375 18059.484375 -14330.6923828125 18055.7421875 C -14332.767578125 18053.044921875 -14334.0009765625 18049.666015625 -14334.0009765625 18046 C -14334.0009765625 18037.166015625 -14326.8359375 18030 -14318.0009765625 18030 C -14309.166015625 18030 -14302.0009765625 18037.166015625 -14302.0009765625 18046 C -14302.0009765625 18049.580078125 -14303.177734375 18052.888671875 -14305.1669921875 18055.5546875 C -14305.17578125 18055.5703125 -14305.1845703125 18055.583984375 -14305.1953125 18055.599609375 C -14307.7724609375 18059.6328125 -14317.96484375 18070 -14317.96484375 18070 Z" stroke="none" fill="#fff" />
    </g>
  </g>
</svg>

No results found

Try another search term.