Composable Components

Prefer full control over layout? Drop the wrapper and assemble the primitives yourself. They all share one state object fromuseColorState, so wiring them together is trivial.

Build your own picker

The color area, sliders, inputs, and preview below are all separate exports composed by hand around a single useColorState hook.

Build Your Own Picker

Compose individual components to create a custom color picker

hex#6366f1

rgbrgb(99, 102, 241)

rgbargba(99, 102, 241, 1.00)

hslhsl(239, 84%, 67%)

hslahsla(239, 84%, 67%, 1.00)

oklchoklch(59% 0.20 277)

oklchaoklch(59% 0.20 277 / 1.00)

Canvas & sliders

The draggable surfaces. All three take the same drag interface, so they compose cleanly around a single useColorState.

ColorArea

2D saturation / value square.

Prop	Type	Description
`hsva`*	`HSVA`	Current color as HSVA (from useColorState).
`onChange`*	`(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`*	`HSVA`	Current color as HSVA (from useColorState).
`onChange`*	`(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`*	`HSVA`	Current color as HSVA (from useColorState).
`onChange`*	`(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.

Inputs

Text / numeric fields. ColorInputs switches formats itself; the per-space variants render a fixed set of channels.

ColorInputs

Format-switchable input group.

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

RGBInputs · HSLInputs · HSVInputs · OKLCHInputs

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

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

Display

Read-only and action pieces.

ColorPreview

Swatch, optionally comparing against an original color.

Prop	Type	Description
`colorValue`*	`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`*	`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`*	`string`	The text to copy.
`label`	`string`	Accessible label / tooltip.
`onCopy`	`(success: boolean) => void`	Called after a copy attempt.
`className`	`string`	Extra classes.

Collections

Swatch grids for presets and history.

PresetColors

Editable preset grid with optional named groups.

Prop	Type	Description
`colors`*	`string[]`	Swatches to display.
`onSelect`*	`(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`*	`(color: string) => void`	Called when a recent color is chosen.
`colors`	`string[]`	Controlled list; overrides localStorage.
`className`	`string`	Extra classes.