Extend UI Svelte

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 ColorPicker and ColorPickerPanel, like upstream. className and class are both accepted.
  • icon is 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 isDark and onIsDarkChange; it reflects isDark and never calls onIsDarkChange.
  • Port addition: ColorPicker passes any other attributes (for example id, data-*, aria-*) through to its root element; upstream's ColorPickerProps accepts no extra attributes.

Back to all components