Color Picker

Saturation area, hue slider, hex input, swatches and the native eyedropper, in a popover or inline. No color library needed.

Inputs

Label colorIn review

Playground

Tweak the props, the preview and the code follow.

Props

mode

swatches

disabled

<ColorPicker defaultValue="#8b5cf6" />

npx @plumsydev/plum-ui add color-picker

Also pulls in popover automatically.

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

<ColorPicker defaultValue="#8b5cf6" />

ColorPickerPanel renders without the popover.

Acme Pro

Your brand, applied live.

Primary

Accent

Surface

Inbox3 new

Design review at 3pm

Invoice #2041 paid

Prop	Type	Default
`value` Controlled hex color.	`string`	`—`
`defaultValue` Initial color when uncontrolled.	`string`	`"#8b5cf6"`
`onValueChange` Called while dragging and typing.	`(hex: string) => void`	`—`
`swatches` Preset colors. Pass `[]` to hide them.	`string[]`	`—`
`align` Popover alignment.	`"start" \| "center" \| "end"`	`"start"`
`children` Custom trigger.	`ReactNode`	`—`

Prop	Type	Default
`value*` Hex color.	`string`	`—`
`onValueChange*` Change handler.	`(hex: string) => void`	`—`
`swatches` Preset colors.	`string[]`	`—`