ColorPicker

Default

<ColorPicker />

Initial value

Pass any valid hex color to value to pre-set the picker state.

<ColorPicker value="#e03131" />
<ColorPicker value="#2f9e44" />
<ColorPicker value="#1971c2" />

With alpha slider

Enable withAlpha to show an opacity slider. The checkerboard pattern beneath the gradient indicates transparency. When alpha is enabled, the form value and the color field in the event detail are still hex — the alpha field in the event carries the 0–1 opacity value.

<ColorPicker value="#7048e8" withAlpha />

Form submission

Provide a name prop to include the color in a form POST. Without withAlpha the submitted value is a hex string (#rrggbb); with alpha it is rgba(r, g, b, a).

<form method="POST" action="/api/theme">
  <ColorPicker name="brandColor" value="#3b82f6" />
  <button type="submit">Save theme</button>
</form>

Listening for changes

The dv-color-change event fires on every interaction — dragging the area, moving the hue slider, or typing in the hex input.

<ColorPicker id="brand-picker" value="#3b82f6" />

<script>
  document.getElementById('brand-picker').addEventListener('dv-color-change', (e) => {
    const { color, alpha } = e.detail
    document.body.style.setProperty('--brand', color)
    console.log(color, alpha) // "#3b82f6", 1
  })
</script>

Interaction notes

• 2D area — drag anywhere to adjust saturation (left/right) and brightness (up/down)
• Hue slider — drag to change the base hue from 0° to 360°
• Hex input — type a 6-digit hex (with or without #) to jump to any color
• Alpha input (when enabled) — type an integer 0–100 for percentage opacity
• Pointer capture ensures drags work even when the cursor leaves the picker area