forms contract
ColorPicker
Color selection with HEX/RGB/HSL tabs and a saturation/value canvas. Used in admin tooling and theming UIs.
Variants
- inline
- Always visible — for the design-tokens editor
- popover
- Trigger swatch opens the picker (default)
Sizes
- md
- 240pt panel
- lg
- 320pt panel
Example
<ColorPicker value={color} onChange={setColor} alpha={false} contrastAgainst="#ffffff" />Usage rule
HEX / RGB / HSL tabs let the user switch input modes; the underlying value is always normalised to RGB.
The full ColorPicker contract has 4 more rules, plus the do-not patterns. Get the full recipe.