color-picker
Form-associated color picker with HSL color space, hue slider, hex/RGB inputs, preset swatches, and EyeDropper API.
Overview
The <color-picker> component wraps a native <input type="color"> and replaces the limited browser picker with a full color space UI. It features a saturation/lightness area, hue slider, hex and RGB text inputs, preset swatches from a <datalist>, and EyeDropper API integration.
<form-field> <label for="brand">Brand color</label> <color-picker name="brand"> <input type="color" id="brand" value="#6366f1"> </color-picker></form-field>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
name |
string | — | Form field name for submission. |
disabled |
boolean | false |
Disables the picker. |
required |
boolean | false |
Marks the field as required for form validation. |
Preset Swatches
Add a <datalist> child with <option> elements to provide a row of preset color swatches.
<color-picker name="accent"> <input type="color" value="#3b82f6"> <datalist> <option value="#ef4444">Red</option> <option value="#f97316">Orange</option> <option value="#eab308">Yellow</option> <option value="#22c55e">Green</option> <option value="#3b82f6">Blue</option> <option value="#8b5cf6">Purple</option> </datalist></color-picker>EyeDropper
On supported browsers, a pipette button appears that opens the EyeDropper API to pick any color from the screen. The button is hidden on browsers that don’t support the API.
Form Integration
The component is form-associated via ElementInternals and works inside <form-field> for validation. The submitted value is always a 7-character hex string (e.g. #6366f1).
<form> <form-field> <label for="theme">Theme color</label> <color-picker name="theme" required> <input type="color" id="theme" value="#6366f1"> </color-picker> <output class="error" for="theme" aria-live="polite"></output> </form-field> <button type="submit">Save</button></form>Keyboard
Color area (saturation/lightness)
| Key | Action |
|---|---|
| Arrow Left / Arrow Right | Adjust saturation by 1% (Shift: 10%). |
| Arrow Up / Arrow Down | Adjust lightness by 1% (Shift: 10%). |
Hue slider
| Key | Action |
|---|---|
| Arrow Left / Arrow Right | Adjust hue by 1° (Shift: 10°). |
Events
| Event | Detail | Description |
|---|---|---|
color-picker:change |
{ hex, rgb, hsl } |
Fired when the color changes. rgb is { r, g, b } (0–255). hsl is { h, s, l } (h: 0–360, s/l: 0–100). |
color-picker:open |
— | Fired when the panel opens. |
color-picker:close |
— | Fired when the panel closes. |
Accessibility
The trigger button uses aria-haspopup="dialog" and aria-expanded. The panel is role="dialog" with an accessible label. The color area uses role="slider" with aria-valuetext describing saturation and lightness percentages. The hue strip uses role="slider" with aria-valuenow for the hue degree. Preset swatches use role="listbox" with individual role="option" buttons. Text inputs provide direct numeric entry for users who prefer precision over the visual interface.