Palette editor
A colour palette builder with reorderable, editable swatches, generated OKLCH tint and shade scales, contrast badges against light and dark text, and copy as CSS variables.
Preview
Brand palette
4 colours · 10 steps each
- White3.6 AA+Ink5.0 AA
- White5.0 AAInk3.6 AA+
- White3.4 AA+Ink5.2 AA
- White8.2 AAAInk2.2 Fail
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | { id: string; name: string; hex: string }[] | — | Controlled swatches in order. |
| defaultValue | PaletteSwatch[] | one Ember swatch | Uncontrolled starting swatches. |
| onValueChange | (value: PaletteSwatch[]) => void | — | Called on edit, rename, add, remove and reorder. |
| prefix | string | "" | Prefix for CSS variable names, e.g. "brand-". |
| max | number | 6 | Most swatches allowed; hides Add colour when reached. |
| title | string | "Palette" | Heading; also names the swatch list. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.