ColorPicker

A customizable color picker with hex, rgb, and hsl formats, eye dropper, and preset colors.

Installation

CLI

Dependencies

This component requires the following npm packages:

Registry Dependencies

This component also requires: https://ui.shadcn.com/r/styles/base-vega/button.json, https://ui.shadcn.com/r/styles/base-vega/input.json, https://ui.shadcn.com/r/styles/base-vega/popover.json, https://ui.shadcn.com/r/styles/base-vega/utils.json

Usage

ColorPicker is a customizable compound component for selecting colors. It supports hex, rgb, and hsl formats, includes an eye dropper tool, and provides a flexible API for building custom color selection interfaces.

The component uses a compound component pattern, allowing you to customize the trigger, content, and individual controls independently. It supports both controlled and uncontrolled usage patterns.

Examples

Controlled with Presets

Control both the color value and popover open state, with preset color options for quick selection.

Preset Colors

Current color:#3b82f6

Picker state:Closed

Minimal Setup

Use only the essential components for a simpler color picker interface.

Custom Format

Set a default color format (hex, rgb, or hsl) for display and input.

API Reference

ColorPicker Props

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the selected color (hex, rgb, or hsl format).
`defaultValue`	`string`	`"#000000"`	The default value of the selected color.
`onValueChange`	`(value: string) => void`	-	Callback fired when the color selection changes.
`open`	`boolean`	-	The controlled open state of the popover.
`defaultOpen`	`boolean`	`false`	The default open state of the popover.
`onOpenChange`	`(open: boolean) => void`	-	Callback fired when the popover open state changes.
`defaultFormat`	`"hex" \| "rgb" \| "hsl"`	`"hex"`	The default color format for display and input.
`disabled`	`boolean`	-	Whether the color picker is disabled.
`children*`	`ReactNode`	-	The trigger element and popover content.

ColorPickerTrigger Props

Prop	Type	Default	Description
`children*`	`ReactNode`	-	The trigger element (usually a Button).
`...props`	`PopoverTriggerProps`	-	All PopoverTrigger props are supported. Note: asChild is always set to true internally.

ColorPickerContent Props

Prop	Type	Default	Description
`...props`	`PopoverContentProps`	-	All PopoverContent props are supported.

ColorPickerSwatch Props

Prop	Type	Default	Description
`...props`	`div`	-	All standard div props are supported.

Sub-components

The following sub-components are available for customizing the color picker interface:

ColorPickerArea - 2D color selection area
ColorPickerHueSlider - Hue slider control
ColorPickerFormatSelect - Format selector (hex/rgb/hsl)
ColorPickerInput - Manual color input field
ColorPickerEyeDropper - Eye dropper tool (browser support required)