Color picker
A classic picker with a saturation/brightness area, hue and opacity rails, HEX/RGB/HSL/OKLCH input, eyedropper, swatches, recents and a WCAG contrast readout, inline or in a popover.
Preview
Swatches
Recent
4.20:1on whiteAA Large
4.27:1on inkAA Large
Button fill
Overlay
Badge text
The inline picker drives this preview: #1c7ed6
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | "#e8590c" | Any parseable colour (hex, rgb(), hsl(), oklch()). |
| onValueChange | (hex: string) => void | — | Emits #rrggbb, or #rrggbbaa below full opacity. |
| alpha | boolean | true | Show the opacity rail. |
| swatches | string[] | [] | Preset colours. |
| defaultRecent | string[] | [] | Seed for Recent; committed colours are added (max 8). |
| formats | ("hex" | "rgb" | "hsl" | "oklch")[] | all four | Formats in the text field switch; the first is the default. |
| showContrast | boolean | true | Contrast ratio and WCAG level on white and on ink. |
| ColorPickerPopover label | string | — | Muted text after the hex in the trigger. |
| ColorPickerPopover aria-label | string | — | Trigger name; the current hex is appended. |
| ColorPickerPopover triggerClassName | string | — | Classes for the trigger (e.g. a fixed width). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.