React Color Picker
A full colour picker: drag the saturation/value square, slide the hue, type a hex, or grab a swatch — all four stay in sync. HSV is the internal source of truth because it is the space people actually pick in; hex is the format they paste.
Drag the square and hue bar, type a hex, or pick a swatch. Selected: #007993
Installation
Props
| Prop | Type | Description |
|---|---|---|
| defaultValue | string | Initial hex colour |
| onChange | (hex) => void | Fires whenever the colour changes |
| swatches | string[] | Preset colours (defaults to Kelvin tokens) |
HSV inside, hex outside
People do not reason in hex — they reason in "this hue, a little less saturated, a little darker," which is exactly the HSV square and hue slider. So the component keeps HSV as the source of truth and derives hex from it, which also sidesteps the rounding drift you get bouncing a colour through hex on every edit. The hex field is there for the other half of the job: pasting a value from a design token or a brand guide. Type a valid #rrggbb and the square and slider jump to match; type garbage and nothing moves.
Both drag surfaces are pointer-driven with a thumb that shows the current position, and the swatch row (defaulting to Kelvin's own palette) gives one-click access to the colours you actually use. The maths is standard HSV↔RGB↔hex, exported inline — no colour library, nothing to pull in.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.