## Color picker
Pick a colour from a selectable palette of presets.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-color-picker> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings.
Props:
- value: string, default #6A1EBB. Selected colour (hex) — its swatch is ringed + checked
- swatches: string, default brand ramp (12). Pipe-separated hex presets, e.g. "#6A1EBB|#FF4081"
- size: 'small' | 'default' | 'large', default default. Scales trigger + swatch dimensions
- disabled: boolean, default false. Greys + inerts the whole control
- open: boolean, default false. Panel open state; reflected attribute
- change: CustomEvent<{value}>, default —. Composed event; read e.detail.value
Tokens: bg-container, bg-container-disabled, bg-elevated, border, border-hover, border-disabled, text-default, text-inverse, text-disabled, color-primary, radius-sm, radius-xs, radius-default, font-product, motion-mid, motion-fast, ease-in-out, ease-out.
Use when: 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).