Components

Color Picker

new

A popover with a saturation area, hue slider, color input, presets and an eyedropper.

Installation

npx shadcn@latest add @blank/color-picker

Usage

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerEyeDropper,
  ColorPickerFormatSelect,
  ColorPickerHueSlider,
  ColorPickerInput,
  ColorPickerPreset,
  ColorPickerPresets,
  ColorPickerSwatch,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

<ColorPicker defaultValue="#4778f5" onValueChange={setColor}>
  <ColorPickerTrigger />
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerInput />
  </ColorPickerContent>
</ColorPicker>

The value is always a lowercase #rrggbb string. The format select only changes what the input edits — hex, RGB or HSL — so code that stores the color never has to parse three formats.

The picker edits in HSV and keeps the hue when saturation or brightness reach zero, so dragging to black and back does not reset the slider to red. The area thumb is a slider too: arrow keys move saturation and brightness, Shift moves ten at a time. ColorPickerEyeDropper renders nothing in browsers without the EyeDropper API.

Examples

Inline

inline renders the content in place instead of in a popover, for settings panels and sidebars.

Value: #26bd6c

API Reference

ColorPicker

Prop	Type	Default
`value` / `defaultValue`	`string`	`"#000000"`
`onValueChange`	`(value: string) => void`	—
`format` / `defaultFormat`	`"hex" \| "rgb" \| "hsl"`	`"hex"`
`onFormatChange`	`(format) => void`	—
`open` / `defaultOpen` / `onOpenChange`	popover state	—
`inline`	`boolean`	`false`
`disabled`	`boolean`	`false`
`name`	`string`	—

Parts

Part	Notes
`ColorPickerTrigger`	An outline `Button` with the swatch and hex; `asChild` for your own.
`ColorPickerContent`	`PopoverContent`, or a plain box when `inline`.
`ColorPickerArea`	Saturation × brightness; pointer and keyboard.
`ColorPickerHueSlider`	A Radix slider over the hue spectrum.
`ColorPickerInput`	Hex field, or three channel fields for RGB and HSL.
`ColorPickerFormatSelect`	Switches `format`.
`ColorPickerSwatch`	The current color.
`ColorPickerPresets` / `ColorPickerPreset`	Preset buttons; `value` is a hex color, `aria-pressed` marks the match.
`ColorPickerEyeDropper`	Picks from the screen where supported.