Hooks

useColorState holds the color and returns every setter the primitives need. usePointerDrag handles dragging on the color area and sliders. useDebounce is deprecated.

useColorState

The core state hook. Pass an initial color and an optional options object. It returns the current color in every format, plus the setters that ColorArea, the sliders, and the inputs expect.

const {
  hsva,
  colorValue,
  updateColor,
  setFromString,
  startDrag,
  endDrag,
} = useColorState('#6366F1', {
  onChange: (color) => console.log(color.hex),
});

// colorValue.hex, colorValue.oklch, … are all live

useColorState + primitives

#6366f1

Returns

Key	Type	Description
`hsva`	`HSVA`	The color as HSVA. Pass it to ColorArea and the sliders.
`colorValue`	`ColorValue`	The color in every format.
`updateColor`	`(hsva: HSVA) => void`	Set the color from an HSVA value (used by sliders/area).
`setFromString`	`(color: string) => ColorValue \| null`	Parse and set from any color string.
`startDrag`	`() => void`	Mark a drag as begun (gates onChangeComplete).
`endDrag`	`() => void`	End a drag; fires onChangeComplete with the final color.

Options

Option	Type	Description
`value`	`string`	Controlled color. When set, the hook follows it.
`onChange`	`(color: ColorValue) => void`	Fires on every change (drag, typing).
`onChangeComplete`	`(color: ColorValue) => void`	Fires once a drag ends, with the final color.

usePointerDrag

The drag primitive behind the color area and sliders. It reports coordinates from 0 to 1 and manages the document-level pointer listeners.

const { containerRef, handlePointerDown } = usePointerDrag(
  ({ x, y }) => {
    // x, y are 0..1 within the element
  },
  onStart,
  onEnd,
);

<div ref={containerRef} onPointerDown={handlePointerDown} />

useDebounce (deprecated)

Deprecated. It will be removed in a future minor release. Debounce in your app instead; the pattern below works with any debounce helper.

const debounced = useDebounce(color, 200);

useEffect(() => {
  save(debounced); // runs 200ms after the last change
}, [debounced]);