Color Picker

Pick colors with a saturation panel, hue slider, optional opacity, swatches, copy, and EyeDropper. Supports HEX, RGB, HSL, and alpha formats.

Saturation panel, hue slider, and color input.

Loading…

Installation

CLI

npx @sonojs/ui@latest add color-picker

Also needs

npx @sonojs/ui@latest add button input-group slider

npm i lucide-react

color-picker.tsx

import { ColorPicker } from "@/components/color-picker"

export function Example() {
  return <ColorPicker defaultValue="#2563EB" showSwatches />
}

Prop	Type	Default	Description
value / defaultValue / onValueChange	string	"#3B82F6"	Controlled or uncontrolled color string.
format / defaultFormat / onFormatChange	ColorFormat	"hex"	Output format for the text field and callbacks.
showOpacity	boolean	false	Show the alpha slider.
showSwatches	boolean	false	Show the preset swatch grid.
showEyeDropper	boolean	false	Show pipette when `window.EyeDropper` exists (Chromium).
showCopy / showFormatSelect	boolean	true	Copy button and format chips.
compact	boolean	false	Narrower panel for popovers and forms.
disabled / readOnly	boolean	false	Lock interaction.