Forms & Inputs

Color Picker

A full-featured color selection component with alpha, swatches, multiple formats, an eyedropper, and a WCAG contrast checker.

View .md Download

A full-featured color selection component built on Lit. Combines a saturation/value canvas, hue and alpha sliders, multi-format text input, swatches, and an eyedropper into a single popover-driven control.

beta since v0.0.14

Example

<nana-color-picker value="#3b82f6" alpha></nana-color-picker>

Variants

The variant attribute switches the layout: spectrum (default), grid (palette-first), or swatch (swatches only). Add notrigger to render inline without the popover.

<nana-color-picker variant="grid" value="#cc0000" notrigger></nana-color-picker>
<nana-color-picker
  variant="swatch"
  value="#10b981"
  swatches="#ef4444,#f59e0b,#10b981,#3b82f6,#6366f1,#8b5cf6"
></nana-color-picker>

Properties

Property	Attribute	Type	Default	Description
`alpha`	`alpha`	`boolean`	`false`
`contrastAgainst`	`contrastAgainst`	`string`	`''`
`disabled`	`disabled`	`boolean`	`false`
`format`	`format`	`ColorFormat`	`'hex'`
`notrigger`	`notrigger`	`boolean`	`false`	Render the picker inline without a trigger button / popover
`readOnly`	`readOnly`	`boolean`	`false`
`showEyedropper`	`showEyedropper`	`boolean`	`true`
`showRecent`	`showRecent`	`boolean`	`true`
`swatches`	`swatches`	`string`	`'#0f1f1d,#ef4444,#f59e0b,#10b981,#3b82f6,#6366f1,#8b5cf6,#ec4899,#64748b,#ffffff'`
`value`	`value`	`string`	`'#3b82f6'`
`variant`	`variant`	`ColorPickerVariant`	`'spectrum'`

Methods

Method	Returns	Description
`open()` / `close()`	`void`	Open or close the popover
`setValue(color)`	`void`	Set the value from any supported format
`getHex()`	`string`	Current value as `#rrggbb(aa)`
`getRGB()`	`{r,g,b,a}`	Current value as RGB(A)
`getHSL()`	`{h,s,l,a}`	Current value as HSL(A)
`getContrastRatio(against?)`	`number \| null`	WCAG contrast ratio against a color

Events

Event	Description
`nana-color-input`	Live value while dragging a slider/canvas (throttled)
`nana-color-change`	Committed value (pointer release, Enter, swatch click)
`nana-color-open`	The popover opened
`nana-color-close`	The popover closed
`nana-change`	Committed value, `{ value }` (mirrors other form controls)

Keyboard

Key	Context	Action
Arrow keys	Canvas	Nudge saturation/value by 1 (Shift: 10)
Arrow keys	Hue / alpha slider	Nudge by 1 (Shift: 10); hue wraps at 0/360
Escape	Popover	Close and return focus to the trigger

CSS Custom Properties

Property	Description
`--nana-color-picker-width`	Width of the spectrum picker (default 16rem)
`--nana-color-picker-thumb-size`	Diameter of the canvas/slider thumbs
`--nana-color-picker-swatch-size`	Trigger swatch dimensions

CSS Parts

Part	Description
`::part(base)`	The inline picker container
`::part(trigger)`	The trigger button (popover mode)
`::part(panel)`	The popover panel
`::part(sv)`	The saturation/value canvas
`::part(preview)`	The color preview swatch

Import

import "@nana-tec/ui-components/color-picker";

Storybook

Explore Color Picker interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook