ColorPicker

A headless HSVA color picker: a saturation/value area, hue and alpha sliders, a swatch and a hex input. Pointer-draggable and keyboard-accessible; emits hex strings.

Features

Saturation/value area plus hue and optional alpha sliders.

Pointer-draggable tracks and arrow-key adjustment on each slider.

Editable hex input synced to the current color.

Controlled or uncontrolled via hex strings (#rgb, #rrggbb, #rrggbbaa).

Toggle the alpha channel with a single prop.

Example

Brand color

Presets

Anatomy


import { ColorPicker } from '@wire-ui/react'
 
<ColorPicker.Root value={color} onChange={setColor}>
<ColorPicker.Area>
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.Swatch />
<ColorPicker.Hue>
<ColorPicker.HueThumb />
</ColorPicker.Hue>
<ColorPicker.Alpha>
<ColorPicker.AlphaThumb />
</ColorPicker.Alpha>
<ColorPicker.Input />
</ColorPicker.Root>

Styling

The Area, Hue and Alpha tracks set their own background gradients inline (the hue spectrum, the current hue for the area, and a transparency gradient for alpha) — you only need to size and round them. Thumbs are absolutely positioned for you; style their appearance. The Swatch fills with the current rgba() color. Each part also carries an identifying data attribute for CSS targeting.


<ColorPicker.Area className="relative h-36 w-full rounded-[8px]">
  <ColorPicker.AreaThumb className="size-3.5 rounded-full border-2 border-white" />
</ColorPicker.Area>

Using data attributes

Each sub-component sets a unique data attribute so you can scope styles without class names.


[data-color-picker-area]  { height: 9rem; border-radius: 8px; }
[data-color-picker-hue]   { height: 0.75rem; border-radius: 9999px; }
[data-color-picker-alpha] { height: 0.75rem; border-radius: 9999px; }
[data-color-picker-area-thumb],
[data-color-picker-hue-thumb],
[data-color-picker-alpha-thumb] {
  width: 0.875rem; height: 0.875rem;
  border: 2px solid #fff; border-radius: 9999px;
}

Root props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value as a hex string (`#rgb`, `#rrggbb`, `#rrggbbaa`)
`defaultValue`	`string`	`'#000000'`	Initial value (uncontrolled)
`onChange`	`(hex: string) => void`	—	Called with the hex string whenever the color changes
`alpha`	`boolean`	`true`	Enable the alpha channel

Sub-component props

Area, AreaThumb, Hue, HueThumb, Alpha, AlphaThumb and Swatch accept the standard div attributes (className, style, …). Input accepts the standard input attributes except value and onChange, which are managed internally.

Data attributes

Attribute	Element
`data-color-picker-area`	Area
`data-color-picker-area-thumb`	AreaThumb
`data-color-picker-hue`	Hue
`data-color-picker-hue-thumb`	HueThumb
`data-color-picker-alpha`	Alpha
`data-color-picker-alpha-thumb`	AlphaThumb
`data-color-picker-swatch`	Swatch

Accessibility

Area, Hue and Alpha render as role="slider" with tabIndex={0} and descriptive aria-label / aria-valuetext / aria-valuenow.
The hex Input exposes aria-label="Hex color".

Keyboard Interactions

Key	Description
`ArrowRight` / `ArrowUp`	Increase the focused slider (saturation, hue or alpha).
`ArrowLeft` / `ArrowDown`	Decrease the focused slider. On the Area, Up/Down adjust brightness and Left/Right adjust saturation.
`Enter`	Commit the typed value in the hex Input.
`Tab`	Move focus between the Area and sliders.