Form

ColorPicker

Inline color picker with a saturation/brightness pad, hue slider, hex text field and optional preset swatches. Works with #rrggbb hex values.

Import

import { ColorPicker } from "@zephora/react";

<ColorPicker defaultValue="#3b82f6" />

Preset colors render as clickable swatch buttons.

<ColorPicker
  defaultValue="#ef4444"
  swatches={["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6"]}
/>

Selected: #22c55e

const [color, setColor] = React.useState("#22c55e");

<ColorPicker value={color} onValueChange={setColor} />
<p>Selected: {color}</p>

Prop	Type	Default	Description
`value`	`string`	—	Controlled hex value ("#rrggbb").
`defaultValue`	`string`	`"#3b82f6"`	Initial hex value in uncontrolled mode.
`onValueChange`	`(hex: string) => void`	—	Called with the new hex value on every change.
`swatches`	`string[]`	—	Preset colors rendered as swatch buttons.
`showInput`	`boolean`	`true`	Shows a hex text field.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Pad scale.
`disabled`	`boolean`	`false`	Disables all interaction.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	Forwarded to the group wrapper element.