ColorPicker

The complete picker in one component: color area, hue and alpha sliders, format-switchable inputs, presets, recent colors, eyedropper, and copy. Turn each part on or off with props.

Controlled vs. uncontrolled

Pass value and onChange for a controlled picker, or defaultValue alone to let ChromaKit manage state. onChange fires on every change; onChangeComplete fires once a drag ends or a swatch is picked.

Default theme · chromakit.css

Props

Every prop is optional. Callbacks receive a ColorValue with every format already converted.

Prop	Type	Default	Description
`value`	`string`	—	Controlled color in any supported format (hex, rgb, oklch…).
`layout`	`'compact' \| 'wide'`	`'compact'`	compact: a 280px column. wide: a 520px side-by-side layout with a preset-group menu.
`defaultValue`	`string`	`'#6366F1'`	Initial color for uncontrolled mode.
`onChange`	`(color: ColorValue) => void`	—	Fires on every change (drag, typing) with all formats.
`onChangeComplete`	`(color: ColorValue) => void`	—	Fires when a change settles (pointer up).
`formats`	`ColorFormat[]`	`all 12 formats`	Which formats the format dropdown offers.
`showAlpha`	`boolean`	`true`	Show the alpha (transparency) slider.
`showInputs`	`boolean`	`true`	Show the numeric / text input fields.
`showPreview`	`boolean`	`true`	Show the color preview swatch.
`showPresets`	`boolean`	`true`	Show the preset color swatches section.
`showCopyButton`	`boolean`	`true`	Show the copy-to-clipboard button.
`showEyeDropper`	`boolean`	`true`	Show the screen color sampler where the browser supports the EyeDropper API; hidden elsewhere.
`presets`	`string[]`	`built-in`	Custom preset colors.
`presetGroups`	`PresetGroup[] \| Record<string, string[]>`	`built-in`	Named preset groups selectable from a dropdown.
`enableHistory`	`boolean`	`true`	Remember recent colors in localStorage.
`historySize`	`number`	`10`	Maximum number of colors kept in history.
`width`	`number \| string`	—	Picker width, as pixels or any CSS width value. Values below ~520px render the stacked layout.
`height`	`number`	—	Color-area height in pixels. Stretches to match the controls when omitted.
`className`	`string`	—	Extra classes on the root — the theming hook (see Theming).

The ColorValue object

onChange and onChangeComplete both receive this object. Every format is computed up front.

interface ColorValue {
  hex: string;    // "#ff6b6b"
  hex8: string;   // "#ff6b6bff"
  rgb: RGB;       // { r, g, b }
  rgba: RGBA;     // { r, g, b, a }
  hsl: HSL;       // { h, s, l }
  hsla: HSLA;     // { h, s, l, a }
  hsv: HSV;       // { h, s, v }
  hsva: HSVA;     // { h, s, v, a }
  oklab: OKLAB;   // { L, a, b }
  oklch: OKLCH;   // { L, C, h }
  oklcha: OKLCHA; // { L, C, h, a }
}

Custom presets

Supply your own swatches with presets, or named groups with presetGroups.

Default theme · chromakit.css

Layouts

The default compact layout is a 280px column. Pass layout="wide" for a 520px side-by-side version with the color area on the left and a preset-group menu.

layout="wide"

Format control

Limit the format dropdown to the formats your app uses.

Default theme · chromakit.css