Hue strip + S/L square
Drag the S/L thumb in the square, drag the hue strip below. Arrow keys nudge values. The swatch + hex input mirror the result.
Color Picker
The vanilla RGB/HSL picker — hue strip, S/L square, hex input. For OKLCH and the wider Nebula color model, see the sibling component oklch-color-picker.
Format-cycling input
Toggle between #hex, rgb(...), and hsl(...). Typing in any format re-syncs the picker.
Eyedropper button
If the browser exposes window.EyeDropper, the button samples a pixel from anywhere on screen. Otherwise it falls back to a noop with a tooltip.
Preset swatches
Click a swatch to load it. The + button saves the current color into a fixed slot (per-session).
Compact popover
A chip + hex code that expands into the full picker. Escape closes; click-outside dismisses.
Live preview swatch
A large swatch updates frame-by-frame as you drag. Useful for picker dialogs over a preview surface.
Usage
Root: <div data-cp data-mode="full" data-formats="hex,rgb,hsl" data-eyedropper="true" data-presets="true">. Emits lsd:color:change with { hex, rgb, hsl, hue, sat, light }. Note on eyedropper: real screen sampling requires the EyeDropper API (Chromium-only at time of writing) and a user-initiated gesture. The button shown here is wired to the API when available and degrades to a stub otherwise.