# Color picker
> Generated from color-picker.contract.json — do not edit by hand.

Pick a colour from a selectable palette of presets.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | string | `#6A1EBB` | Selected colour (hex) — its swatch is ringed + checked |
| `swatches` | string | `brand ramp (12)` | Pipe-separated hex presets, e.g. "#6A1EBB|#FF4081" |
| `size` | 'small' | 'default' | 'large' | `default` | Scales trigger + swatch dimensions |
| `disabled` | boolean | `false` | Greys + inerts the whole control |
| `open` | boolean | `false` | Panel open state; reflected attribute |
| `change` | CustomEvent<{value}> | `—` | Composed event; read e.detail.value |

## Visual standard (measured)
- Trigger: 1px border #E3E3E3, radius 6; current swatch 16/20/24 by size (radius 4)
- Panel: bg-elevated #FFFFFF, radius 8, 4-col swatch grid
- Swatch: 22/28/34 by size, radius 4; selected ringed color-primary + check glyph
- Selected: aria-pressed=true, .on ring + system-check (dark on pale chips)
- Disabled: bg-container-disabled fill, border-disabled, not-allowed, inert
- Motion: panel fade + lift; swatch hover scale; check fade (ease-out)

## When to use
- **Color picker** — choosing a brand or theme colour from a curated set
- **Segmented** — picking a labelled option rather than a colour
- **Input** — an arbitrary free-form value is genuinely needed

Prefer a curated palette over a free spectrum — on-brand results, fewer accessibility misses. Show the current value beside the trigger so the choice is legible.