Color Picker

Composite color selection component including area, sliders, wheel, swatch preview, value inputs, and swatch grid.

Stable

Open Color Picker Playground

Anatomy

  1. Color area (2D saturation/lightness gradient)
  2. Color sliders (hue and alpha)
  3. Color wheel (hue visualization)
  4. Color swatch (current selection preview)
  5. Hex / RGB / HSL inputs (direct value editing)
  6. Swatch picker grid (preset colors)

States

Default
Disabled

Options

PropertyValuesDefault
valueCSS color string#6366f1
formathex / rgb / hslhex
statedefault / disableddefault
swatchesArray of color stringsBuilt-in 8 swatches

Note: The Nunjucks macro renders RGB/HSL channel fields as placeholders. The `` web component and playground renderer derive channel values from the `value` hex color.

Tokens

  • --uif-color-picker-gap
  • --uif-color-picker-panel-background
  • --uif-color-picker-panel-border-color
  • --uif-color-picker-panel-border-size
  • --uif-color-picker-panel-border-radius
  • --uif-color-picker-control-height
  • --uif-color-picker-slider-height
  • --uif-color-picker-slider-thumb-size
  • --uif-color-picker-swatch-size
  • --uif-color-picker-swatch-border-radius
  • --uif-color-picker-swatch-border-color
  • --uif-color-picker-text-color-default
  • --uif-color-picker-text-color-subtle
  • --uif-color-picker-focus-ring-color
  • --uif-color-picker-focus-ring-size
  • --uif-color-picker-accent-color