Forms

Color Picker

OKLCH-native color input on a popover, with an area, hue slider and swatches.

Import

tsx

import { ColorPicker } from "@cooud-ui/ui";

bash

npx cooud-ui add color-picker

Examples

With swatches

A controlled OKLCH color input on a popover — drag the area and hue slider, type any channel or the full oklch() string, or pick one of the preset swatches.

oklch(0.62 0.21 256)

tsx

const brandSwatches = [
  "oklch(0.62 0.21 256)",
  "oklch(0.65 0.24 24)",
  "oklch(0.72 0.19 145)",
  "oklch(0.8 0.16 86)",
  "oklch(0.62 0.25 304)",
];

function ColorPickerDemo() {
  const [color, setColor] = useState("oklch(0.62 0.21 256)");

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <ColorPicker
        value={color}
        onValueChange={setColor}
        swatches={brandSwatches}
        aria-label="Brand color"
      />
      <div className="flex items-center gap-2 text-sm text-fg-secondary">
        <span
          aria-hidden="true"
          className="size-4 rounded-full border border-border"
          style={{ background: color }}
        />
        <span className="font-mono text-xs tabular-nums">{color}</span>
      </div>
    </div>
  );
}

API Reference

Generated from the component's exported types.

ColorPickerProps

Prop	Type	Default	Description
`value`	`string`	—	Controlled color as a CSS color string (ideally `oklch(l c h)`).
`defaultValue`	`string`	`DEFAULT_VALUE`	Initial color for uncontrolled usage. Defaults to a brand-ish oklch.
`onValueChange`	`(value: string) => void`	—	Called with the new color, serialized as `oklch(l c h)`, on every change.
`swatches`	`string[]`	`DEFAULT_SWATCHES as unknown as string[]`	Preset swatches shown as a row; clicking one selects it.
`disabled`	`boolean`	`false`	Disables the trigger and all panel controls.
`aria-label`	`string`	—	Accessible name for the trigger when there is no visible label.
`className`	`string`	—	Extra classes for the trigger button.
`contentClassName`	`string`	—	Extra classes for the popover panel.
`id`	`string`	—	Native id for the trigger.