ColorPicker
atomFully-featured color selection component. Opens a portaled popover (zIndex 999999) with a spectrum panel, hue and alpha sliders, four input formats (Hex, RGB, HSL, HSB), eyedropper support, and multi-group preset palettes. Supports compact size and inline label placement.
Default
Basic color picker with label.
With preset groups
Multiple preset palettes switchable via dropdown.
Compact inline
Small trigger with inline label — ideal for settings panels and customizers.
Usage
Installation
API Reference
ColorPicker props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Current color value (any CSS color string). |
onChange* | (color: string) => void | — | Callback fired when the color changes. |
label | string | — | Label displayed above the trigger swatch. |
size | "sm" | "md" | "md" | Trigger swatch size. sm renders a compact 24px swatch. |
inline | boolean | false | Places the label beside the swatch instead of above it. |
presetGroups | ColorPresetGroup[] | — | Array of { label, colors } groups. Single group hides the switcher; multiple groups show a dropdown. |
disabled | boolean | false | Prevents interaction. |