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

Color area

Component status
Contribution
Current version@spectrum-css/colorarea@5.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/colorarea@6.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

  • The .spectrum-ColorHandle should be moved with the transform: translate(x, y) style property as the sliders are dragged
  • Set the background style property of .spectrum-ColorArea-gradient to the gradient of the colors to be selected
  • Set the value attribute of .spectrum-ColorArea-slider[name=x] to the currently selected x value (i.e. saturation)
  • Set the value attribute of .spectrum-ColorArea-slider[name=y] to the currently selected y value (i.e. value)
  • Set the value of the ColorHandle component to the selected color
  • Marshall focus between the saturation and value sliders according to which keys are pressed (up/down for value, left/right for saturation)

Variants

Standard
Contribution

Show markup
<div class="spectrum-ColorArea">
  <div class="spectrum-ColorArea-gradient" style="background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, white 0%, rgba(0, 0, 0, 0) 100%), rgb(255, 0, 0);"></div>

  <div class="spectrum-ColorHandle spectrum-ColorArea-handle" style="--spectrum-picked-color: rgba(255, 0, 0);">
    <div class="spectrum-ColorHandle-inner"></div>
      <svg class="spectrum-ColorLoupe">
        <!-- use ColorLoupe markup here -->
      </svg>
  </div>

  <input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation" min="0" max="1" step="0.01">
  <input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="luminosity" min="0" max="1" step="0.01">
</div>

Disabled
Contribution

Show markup
<div class="spectrum-ColorArea is-disabled">
  <div class="spectrum-ColorArea-gradient" style="background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, white 0%, rgba(0, 0, 0, 0) 100%), rgb(255, 0, 0);"></div>

  <div class="spectrum-ColorHandle spectrum-ColorArea-handle is-disabled">
    <div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
  </div>

  <input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation" min="0" max="1" step="0.01">
  <input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="luminosity" min="0" max="1" step="0.01">
</div>

Custom Size
Contribution

Show markup
<div class="spectrum-ColorArea" style="--mod-colorarea-width: 80px; --mod-colorarea-height: 80px">
  <div class="spectrum-ColorArea-gradient" style="background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, white 0%, rgba(0, 0, 0, 0) 100%), rgb(255, 0, 0);"></div>

  <div class="spectrum-ColorHandle spectrum-ColorArea-handle">
    <div class="spectrum-ColorHandle-inner" style="background-color: rgb(255, 0, 0)"></div>
      <svg class="spectrum-ColorLoupe">
        <!-- use ColorLoupe markup here -->
      </svg>
  </div>

  <input type="range" class="spectrum-ColorArea-slider" name="x" aria-label="saturation" min="0" max="1" step="0.01">
  <input type="range" class="spectrum-ColorArea-slider" name="y" aria-label="luminosity" min="0" max="1" step="0.01">
</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.

Migration Guide

  • canvas variant has been removed