useColor

function useColor(  options?: UseColorOptions,): UseColorReturn;

requested is the exact OKLCH color the user asked for and may be out of gamut; displayed is that color gamut-mapped into the active gamut (displayedSrgb / displayedP3 hold both). Works uncontrolled (defaultColor) or controlled (state + onChange). Setters always build on the latest state, so several calls in one event handler compose. To share the state with color components, use the <Color> provider instead.

Parameters

options?UseColorOptionsdefault {}

Initial or controlled state and the change callback.

Returns

UseColorReturnThe current state, derived conversions and setters.

Example

import { useColor } from '@pbroom/color-kit/react';

function Swatch() {
  const color = useColor({ defaultColor: '#3b82f6' });
  color.hex; // → '#3b82f6'
  color.requestedCss('oklch'); // → 'oklch(0.6231 0.188 259.81)'

  return (
    <button
      style={{ background: color.displayedCss() }}
      onClick={() => color.setChannel('h', 30)}
    />
  );
}

See also