Composable Components

Need a different layout? Skip ColorPicker and assemble the primitives yourself. They share one state object fromuseColorState, so each control needs only two props.

Build your own picker

The color area, sliders, inputs, and preview below are separate exports, composed around one useColorState call.

Composed from primitives

hex#6366f1

rgbrgb(99, 102, 241)

rgbargba(99, 102, 241, 1.00)

hslhsl(238.7, 83.5%, 66.7%)

hslahsla(238.7, 83.5%, 66.7%, 1.00)

oklchoklch(58.5% 0.204 277.1)

oklchaoklch(58.5% 0.204 277.1 / 1.00)

Canvas & sliders

The draggable surfaces. All three share one prop interface and read from the same useColorState.

ColorArea

Two-dimensional saturation and brightness area.

Prop	Type	Description
`hsva`* required	`HSVA`	Current color as HSVA (from useColorState).
`onChange`* required	`(hsva: HSVA) => void`	Called as the user drags.
`onStart`	`() => void`	Fires on drag start.
`onEnd`	`() => void`	Fires on drag end.
`width`	`number`	Width in pixels.
`height`	`number`	Height in pixels.
`className`	`string`	Extra classes.

HueSlider

Hue selection track.

Prop	Type	Description
`hsva`* required	`HSVA`	Current color as HSVA (from useColorState).
`onChange`* required	`(hsva: HSVA) => void`	Called as the user drags.
`onStart`	`() => void`	Fires on drag start.
`onEnd`	`() => void`	Fires on drag end.
`vertical`	`boolean`	Render vertically.
`className`	`string`	Extra classes.

AlphaSlider

Transparency track with checkerboard.

Prop	Type	Description
`hsva`* required	`HSVA`	Current color as HSVA (from useColorState).
`onChange`* required	`(hsva: HSVA) => void`	Called as the user drags.
`onStart`	`() => void`	Fires on drag start.
`onEnd`	`() => void`	Fires on drag end.
`vertical`	`boolean`	Render vertically.
`className`	`string`	Extra classes.

Display

Previews, swatches, and single-purpose buttons.

ColorPreview

Swatch, optionally comparing against an original color.

Prop	Type	Description
`colorValue`* required	`ColorValue`	Color to preview.
`showComparison`	`boolean`	Split the swatch to show before / after.
`originalColor`	`string`	The "before" color for comparison.
`size`	`'sm' \| 'md' \| 'lg'`	Swatch size.
`className`	`string`	Extra classes.

ColorSwatch

A single selectable color button.

Prop	Type	Description
`color`* required	`string`	The color it represents.
`selected`	`boolean`	Show the active ring.
`onClick`	`() => void`	Click handler.
`onLongPress`	`() => void`	Long-press handler (edit).
`onDelete`	`() => void`	Delete handler.
`editing`	`boolean`	Render in editing state.
`className`	`string`	Extra classes.

CopyButton

Copies text to the clipboard with feedback.

Prop	Type	Description
`text`* required	`string`	The text to copy.
`label`	`string`	Accessible label / tooltip.
`onCopy`	`(success: boolean) => void`	Called after a copy attempt.
`className`	`string`	Extra classes.

EyeDropperButton

Screen color sampler backed by the EyeDropper API. Renders nothing where the API is unavailable.

Prop	Type	Description
`onPick`* required	`(color: string) => void`	Receives the picked hex color.
`label`	`string`	Accessible label / tooltip.
`className`	`string`	Extra classes.

Inputs

Text and numeric fields. ColorInputs switches between formats; the per-format variants render a fixed set of channels.

ColorInputs

Format-switchable input group.

Prop	Type	Description
`colorValue`* required	`ColorValue`	Current color (all formats).
`onChange`* required	`(colorString: string) => void`	Receives the edited color as a string.
`format`* required	`ColorFormat`	Active format.
`onFormatChange`	`(format: ColorFormat) => void`	Called when the user switches format.
`showCopyButton`	`boolean`	Show the copy-to-clipboard button.
`onCopy`	`(success: boolean) => void`	Called after a copy attempt.
`showAlpha`	`boolean`	Include the alpha channel field.
`availableFormats`	`ColorFormat[]`	Formats offered in the switcher.
`className`	`string`	Extra classes.

RGBInputs · HSLInputs · HSVInputs · OKLCHInputs · OKLABInputs

Fixed per-space channel fields. Identical prop shape across all five.

Prop	Type	Description
`colorValue`* required	`ColorValue`	Current color (all formats).
`onChange`* required	`(colorString: string) => void`	Receives the edited color as a string.
`showAlpha`	`boolean`	Include the alpha channel field.
`className`	`string`	Extra classes.

Collections

Swatch grids for presets and history.

PresetColors

Editable preset grid with optional named groups.

Prop	Type	Description
`colors`* required	`string[]`	Swatches to display.
`onSelect`* required	`(color: string) => void`	Called when a swatch is chosen.
`selectedColor`	`string`	Highlights the matching swatch.
`editable`	`boolean`	Allow add / edit / delete.
`presetGroups`	`PresetGroup[]`	Named groups for the dropdown.
`className`	`string`	Extra classes.

RecentColors

Recently used colors. Reads localStorage on mount, or renders the colors prop when supplied.

Prop	Type	Description
`onColorSelect`* required	`(color: string) => void`	Called when a recent color is chosen.
`colors`	`string[]`	Controlled list; overrides localStorage.
`className`	`string`	Extra classes.