Color Picker

A popover color picker with saturation area, hue and alpha sliders and an eye-dropper. Switches between hex, RGB, HSL and HSB formats.

Playground

label

variant

size

withoutAlpha

<ColorPicker defaultValue="#3b82f6">
  <ColorPickerTrigger>
    <ColorPickerSwatch />
    Pick a color
  </ColorPickerTrigger>
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerAlphaSlider />
    <ColorPickerFormatSelect className="w-full" />
    <ColorPickerInput className="flex-1" />
  </ColorPickerContent>
</ColorPicker>

Preview

Compose the parts inside ColorPicker: ColorPickerTrigger opens the popover, and ColorPickerContent stacks the area, sliders and inputs. ColorPickerSwatch previews the current color anywhere – here inside the trigger.

<ColorPicker defaultValue="#3b82f6">
  <ColorPickerTrigger>
    <ColorPickerSwatch className="size-5" />
    Pick a color
  </ColorPickerTrigger>
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerFormatSelect className="w-full" />
    <ColorPickerInput className="flex-1" />
  </ColorPickerContent>
</ColorPicker>

Installation

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/color-picker.json

Usage

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

const [color, setColor] = React.useState("#3b82f6")

<ColorPicker value={color} onValueChange={setColor}>
  <ColorPickerTrigger>
    <ColorPickerSwatch className="size-5" />
    {color}
  </ColorPickerTrigger>
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerInput />
  </ColorPickerContent>
</ColorPicker>

Trigger variants and sizes

ColorPickerTrigger maps onto the design system Button: variant picks outline, subtle or ghost, and size spans xs to lg. Pass the matching size to the swatch inside.

<ColorPicker defaultValue="#3b82f6">
  <ColorPickerTrigger variant="subtle" size="sm">
    <ColorPickerSwatch size="sm" />
    #3b82f6
  </ColorPickerTrigger>
  ...
</ColorPicker>

<ColorPicker defaultValue="#10b981">
  <ColorPickerTrigger variant="ghost" size="lg">
    <ColorPickerSwatch size="lg" />
    #10b981
  </ColorPickerTrigger>
  ...
</ColorPicker>

Alpha and eye dropper

Add ColorPickerAlphaSlider for transparency and ColorPickerEyeDropper to sample any pixel on screen – the eye-dropper button renders only in browsers that support the EyeDropper API.

<ColorPicker defaultValue="#ef4444">
  <ColorPickerTrigger>
    <ColorPickerSwatch className="size-5" />
    Pick / Sample
  </ColorPickerTrigger>
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerAlphaSlider />
    <div className="flex items-center gap-2">
      <ColorPickerEyeDropper />
      <ColorPickerFormatSelect className="w-full" />
    </div>
    <ColorPickerInput className="flex-1" />
  </ColorPickerContent>
</ColorPicker>

Inline

The inline prop drops the popover entirely and renders ColorPickerContent as a plain panel – useful for sidebars and settings pages.

<ColorPicker inline defaultValue="#f59e0b">
  <ColorPickerContent className="w-full rounded-lg border bg-popover">
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerAlphaSlider />
    <div className="flex items-center gap-2">
      <ColorPickerSwatch />
      <ColorPickerFormatSelect className="w-full flex-1" />
    </div>
    <ColorPickerInput className="flex-1" />
  </ColorPickerContent>
</ColorPicker>

API reference

ColorPicker holds all state in an external store and shares it with the parts via context. Inside a form it renders a hidden input with the current hex value, so name / required work like a native field. The ColorPickerProps type and a useColorPicker(selector) hook (for reading store state in custom parts) are also exported.

ColorPicker

Prop	Type	Default	Description
value	string	–	Controlled color, parsed from hex, rgb(a), hsl(a) or hsb(a) strings.
defaultValue	string	"#000000"	Initial color when uncontrolled.
onValueChange	(value: string) => void	–	Called with the color serialized in the active format.
format / defaultFormat	"hex" \| "rgb" \| "hsl" \| "hsb"	"hex"	Active output format – controlled via format + onFormatChange, or switched in the UI by ColorPickerFormatSelect.
open / defaultOpen	boolean	false	Popover open state; pair the controlled form with onOpenChange.
inline	boolean	false	Render without a popover – ColorPickerContent becomes a plain div panel.
modal	boolean	–	Forwarded to the underlying Popover.
name	string	–	Name for the hidden form input (submitted as hex).
disabled	boolean	false	Disables the trigger and every part inside the content.
readOnly / required	boolean	–	Forwarded to the hidden form input.
dir	"ltr" \| "rtl"	–	Text direction; falls back to the Direction provider.
asChild	boolean	false	Merge the root's props onto the child element.

ColorPickerTrigger

Prop	Type	Default	Description
variant	"outline" \| "subtle" \| "ghost"	"outline"	Visual style, mapped to the corresponding Button variant.
size	"xs" \| "sm" \| "md" \| "lg"	"md"	Trigger height, text size and radius.

ColorPickerInput

Prop	Type	Default	Description
withoutAlpha	boolean	false	Hide the alpha field from the grouped channel inputs.

Component	Description
ColorPickerTrigger	Popover trigger button (data-slot="color-picker-trigger", plus data-variant and data-size).
ColorPickerContent	Panel that stacks the parts (data-slot="color-picker-content"). A PopoverContent normally, a plain div in inline mode.
ColorPickerArea	Draggable saturation/brightness square (data-slot="color-picker-area") with a floating thumb.
ColorPickerHueSlider	Hue slider, 0–360, over a rainbow track (data-slot="color-picker-hue-slider").
ColorPickerAlphaSlider	Alpha slider, 0–100, over a checkerboard track (data-slot="color-picker-alpha-slider").
ColorPickerSwatch	Live preview circle (data-slot="color-picker-swatch", role="img" with a spoken color label). Shows a checkerboard behind transparent colors.
ColorPickerEyeDropper	Screen-sampling button (data-slot="color-picker-eye-dropper"). Renders only when the browser exposes the EyeDropper API.
ColorPickerFormatSelect	Tabs that switch the active format between HEX, RGB, HSL and HSB (data-slot="color-picker-format-select").
ColorPickerInput	Format-aware value inputs (data-slot="color-picker-input") – a hex + alpha pair, or grouped channel fields for rgb / hsl / hsb, each with a descriptive aria-label.