Docs / Primitives / Color Picker
Color Picker
Pick a color from an OKLCH plane, hue and opacity sliders, or typed values in Hex, RGB, HSL,
or OKLCH. Dark mode is controlled by the parent through isDark; the toggle below
lives outside the component.
Input
Brand: #2563EB
Swatch
Highlight: #F59E0B
With opacity
%
Overlay: #11182780
Inline panel
LCH
HSL
RGB
Fill: #EF4444
Disabled
A disabled panel locks only its channel and opacity fields, like upstream; the plane, sliders, value field, and format picker stay live.
LCH
HSL
RGB
%
Differences from upstream
- Exported as
ColorPickerandColorPickerPanel, like upstream.classNameandclassare both accepted. iconis a Svelte snippet instead of a React component type.- The format picker is a native
select(no Select or Tooltip primitives are ported). - The popover opens inline below the trigger instead of floating in a portal. It behaves
like upstream's Popover otherwise: the trigger reports
aria-expanded, focus moves into the panel on open, Escape, a click outside, or tabbing out closes it, and focus returns to the trigger. - The copy button beside each channel row, focus-reselect, and opacity scrub-dragging are not ported. Copying a fully selected value field copies the CSS color, like upstream.
- In containers narrower than the panel (phones), the fields column wraps under the plane; upstream keeps one row and overflows.
- Accepts
isDarkandonIsDarkChange; it reflectsisDarkand never callsonIsDarkChange. - Port addition:
ColorPickerpasses any other attributes (for exampleid,data-*,aria-*) through to its root element; upstream'sColorPickerPropsaccepts no extra attributes.