Color Picker
A color picker component that allows users to select colors using various input methods.
Installation
pnpm dlx shadcn@latest add @diceui/color-picker
Layout
Import the parts, and compose them together.
import {
ColorPicker,
ColorPickerAlphaSlider,
ColorPickerArea,
ColorPickerContent,
ColorPickerEyeDropper,
ColorPickerFormatSelect,
ColorPickerHueSlider,
ColorPickerInput,
ColorPickerSwatch,
ColorPickerTrigger,
} from "@/components/ui/color-picker";
return (
<ColorPicker>
<ColorPickerTrigger>
<ColorPickerSwatch />
</ColorPickerTrigger>
<ColorPickerContent>
<ColorPickerArea />
<ColorPickerEyeDropper />
<ColorPickerHueSlider />
<ColorPickerAlphaSlider />
<ColorPickerFormatSelect />
<ColorPickerInput />
</ColorPickerContent>
</ColorPicker>
)Examples
Inline Color Picker
Use the inline prop to render the color picker inline instead of in a popover.
Controlled State
A color picker with controlled state management.
With Form
A color picker with form integration.
API Reference
ColorPicker
The main container component for the color picker.
Prop
Type
ColorPickerTrigger
The trigger button that opens the color picker popover.
Prop
Type
ColorPickerContent
The content container for the color picker components.
Prop
Type
ColorPickerArea
The 2D color area for selecting hue and saturation.
Prop
Type
ColorPickerSwatch
A color swatch that displays the current color.
Prop
Type
ColorPickerHueSlider
A slider for adjusting the hue value of the color.
Prop
Type
ColorPickerAlphaSlider
A slider for adjusting the alpha (transparency) value of the color.
Prop
Type
ColorPickerEyeDropper
A button that activates the browser's native eye dropper tool to pick colors from the screen.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when the component is disabled. |
Note: The EyeDropper component only renders when the browser supports the native EyeDropper API. It will return null in unsupported browsers.
ColorPickerFormatSelect
A select dropdown for choosing the color format (hex, rgb, hsl, hsb).
Prop
Type
ColorPickerInput
An input field that displays and allows editing of the color value in the selected format.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
| EnterSpace | Opens the color picker when focus is on the trigger. |
| Escape | Closes the color picker and moves focus to the trigger. |
| ArrowUpArrowDownArrowLeftArrowRight | Adjusts the color value when focus is on sliders or the color area. |
Browser Support
EyeDropper API
The EyeDropper component requires browser support for the native EyeDropper API:
- Chrome/Edge: Supported from version 95+
- Firefox: Not supported
- Safari: Not supported
The component gracefully handles unsupported browsers by not rendering the eye dropper button.
Color Formats
The color picker supports the following color formats:
- HEX: Hexadecimal color notation (e.g.,
#3b82f6) - RGB: Red, Green, Blue color notation (e.g.,
rgb(59, 130, 246)) - HSL: Hue, Saturation, Lightness color notation (e.g.,
hsl(217, 91%, 60%)) - HSB: Hue, Saturation, Brightness color notation (e.g.,
hsb(217, 76%, 96%))
All formats support alpha channel for transparency when not using the withoutAlpha prop.