Colour picker

Any colour, one control

A swatch trigger that opens a panel with a saturation and brightness area, a hue slider, an optional alpha slider, and a hex field. Emits uppercase hex live while dragging, works controlled or uncontrolled, and the saturation area is fully keyboard-operable with the arrow keys.

Default

With hex text

With label and helper

Brand colour

Drives the whole action ramp.

Alpha

Controlled

#EF476F

Compact

States

Accent colour

This colour fails the contrast requirement.

// From the npm package
import { ColorPicker } from 'rift-ds/components/ColorPicker/ColorPicker';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/color-picker.json