Color Picker

Swatch trigger opening a popover with a saturation/lightness area, a hue slider, an optional alpha slider, and hex plus HSL value fields. Built on the Reka UI color primitives; the model value is a hex string.

Default

Bound with v-model to a hex string. The trigger previews the working color and shows the picked value.

Value: #3b82f6

Usage

Import the parts you need from the component's folder.

import { ColorPicker } from "@/components/ui/color-picker";

With alpha

Pass alpha to add a transparency slider. The emitted hex grows to eight digits (#rrggbbaa) once alpha drops below 1, and the swatch reveals a checkerboard behind translucent values.

Value: #16a34acc

Empty state

With no value bound, the trigger falls back to placeholder text while still previewing the color the popover would apply.

Value: empty

Preset swatches

Pair the picker with quick-pick swatches to speed up common brand colors.

In a form field

Composed with Label and a hint line, the way it renders inside a form.

Brand color

Used for buttons and highlights across the site.

Disabled

Non-interactive, dimmed state.

Locked color

API Reference

ColorPicker

Prop	Type	Default	Description
`modelValue`	`string \| null`	`""`	Hex color, e.g. #3b82f6. Supports v-model. Invalid or empty values leave the field unset.
`alpha`	`boolean`	`false`	Show the alpha slider. Off keeps every emitted value a six-digit hex.
`disabled`	`boolean`	`false`	Disable the trigger and the popover.
`placeholder`	`string`	`"Pick a color"`	Trigger label shown while no color is set.
`align`	`"start" \| "center" \| "end"`	`"start"`	Popover alignment against the trigger.
`id`	`string`	`undefined`	Forwarded to the trigger button, for pairing with a Label.
`class`	`string \| object \| array`	`""`	Extra classes on the trigger.

Event	Description
`update:modelValue`	Fires with the new hex string on every change. Enables v-model.
`update:open`	Fires when the popover opens or closes. Enables v-model:open.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter`	Opens the popover when the trigger is focused.
`Space`	Opens the popover when the trigger is focused.
`Esc`	Closes the popover and returns focus to the trigger.
`←`	Moves the area thumb or slider one step down.
`→`	Moves the area thumb or slider one step up.
`↑`	Moves the area thumb up, or a slider one step up.
`↓`	Moves the area thumb down, or a slider one step down.
`Shift` + `←`	Moves the area thumb in larger increments.

The color area and each slider expose their channel name and value to screen readers.
Hex and HSL fields accept typed input, so the picker never depends on pointer precision alone.
Give the trigger an id and pair it with a Label so the control is announced with its purpose.

Checkbox Combobox