ColorPicker

The batteries-included component: color area, hue and alpha sliders, format-switchable inputs, presets, history, and copy — all configurable through props.

Controlled vs. uncontrolled

Pass value + onChange for a controlled picker, or defaultValue alone to let ChromaKit manage state. onChange fires continuously; onChangeComplete fires when the interaction settles.

Presets

Props

Every ColorValue passed to onChange contains all formats pre-converted, so you never convert manually.

Prop	Type	Default	Description
`value`	`string`	—	Controlled color in any supported format (hex, rgb, oklch…).
`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 11 formats`	Which format tabs the inputs expose.
`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.
`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`	—	Picker width in pixels. Auto when omitted.
`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 fully-converted object.

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 the presets array, or named groups via presetGroups.

Presets

Format control

Restrict the input tabs to the formats your app cares about.

Presets