build69
build69  /  Components  /  Selection & Choice  /  ColorPicker

ColorPicker

v1.0.4NewUpdated 4 Oct 2026

Dependency-free HSV color picker with a 2D saturation/brightness area, hue slider, optional alpha slider (checkerboard), hex + RGB(A) inputs, preset swatches and an eyedropper button when the browser supports window.EyeD

View source← Back to catalog

Preview

Live · 12 stories
DefaultOpen ↗
▸Why this is recommendedcolorcolourpickerswatch+6

The default, out-of-the-box ColorPicker.

Recommended for+14
  • ✓Brand / theme colour settings
  • ✓Invoice or label template colours
  • ✓Tag and calendar colour assignment
  • ✓Chart series colour overrides
Tags+6
colorcolourpickerswatchhsvhexrgbaeyedropperbranddefault
Features+4
  • 2D saturation/brightness area with pointer drag + arrow keys
  • Hue slider (0–360°)
  • Optional alpha slider with checkerboard track
  • Hex + R/G/B (+ A) inputs with draft-and-commit editing
  • Preset swatches with accessible labels + aria-pressed
  • Eyedropper (feature-detected, SSR-safe)
  • Inline panel or popover swatch trigger
  • Controlled + uncontrolled (hex in, hex/rgba out)
  • Full keyboard operability, polite value announcements
  • Sizes sm / md / lg
  • i18n: labels prop overrides every built-in string (slider aria + valuetext templates, captions, announcements); numbers format via LocaleProvider
  • Labelled by FormField: the inline group / swatch trigger takes the id and is named by the field label through aria-labelledby; the trigger current colour moves into its description (labels.currentColor)
Not recommended for−2
  • ✕Choosing from a small fixed palette only (render preset swatch buttons instead)
  • ✕Gradient editing

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ColorPicker" })

Usage

import { ColorPicker } from '@/components/inputs/color-picker';

<ColorPicker variant="popover" value={brand} onValueChange={setBrand} presets={['#166534', '#ea580c', '#0e7490']} showAlpha />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Controlled colour — hex or rgba() string

string—
defaultValue

Initial colour (uncontrolled)

string—
onValueChange

Emits hex, or rgba() when alpha < 1

function—
variant

Inline panel or swatch button + popover

'inline' | 'popover'—
size

Panel / trigger sizing

'sm' | 'md' | 'lg'—
showAlpha

Show alpha slider + A input

boolean—
presets

Preset swatches (value + optional label)

(string | ColorPickerPreset)[]—
showEyeDropper

Hide the eyedropper even when supported

boolean—
disabled

Disable all controls

boolean—
labels

Override every built-in UI string — slider names + valuetext templates, input captions, eyedropper, live announcement (i18n). Merged over DEFAULT_COLOR_PICKER_LABELS.

Partial<ColorPickerLabels>—
aria-labelledby

Id(s) of the element(s) that label the picker; wins over a FormField label

string—
id

DOM id set on the outer element (swatch trigger or inline group); FormField clones its field id in, and its label then names the control

string—
aria-describedby

Id(s) of hint or error text describing the picker (FormField clones this in)

string—
aria-invalid

Mark the picker invalid; FormField clones this in from its error prop

boolean—
aria-required

Accepted (FormField clones it in) but not rendered: ARIA does not allow it on a button or a group. The label text "required" is part of the name instead

boolean—

Related

Platform docsAll componentsSource files