Color rosette
A circular swatch picker of overlapping petal discs that spread on hover, with a tints row, arrow-key navigation around the ring and a hex value popover with copy.
Preview
Harbor · #1c7ed6
Preview
RoadmapDesignQ4
Arrow keys walk around the ring. Click the centre for the hex value.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | RosetteColor[] | ROSETTE_HUES | Ring hues as { value, name } with 6-digit hex values. |
| value | string | — | Controlled hex value. |
| defaultValue | string | first colour | Uncontrolled starting value. |
| onValueChange | (hex: string) => void | — | Called when a hue or tint is picked. |
| size | number | 168 | Ring diameter in px; discs scale with it. |
| tints | boolean | true | Show the tints row for the chosen hue. |
| label | string | "Colour" | Prefix for the hue and tint radiogroup names. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.