║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Color Picker description: A color picker component that allows users to select colors using various input methods. preview: true links: api: /docs/components/color-picker#api-reference

<ComponentTabs name="color-picker-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/color-picker"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot class-variance-authority lucide-react
 ```

</Step> <Step> Copy the refs composition utilities into your `lib/compose-refs.ts` file.

<ComponentSource name="compose-refs" />

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="color-picker" />

</Step> </Steps>

Layout

Import the parts, and compose them together.

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

<ColorPicker>
  <ColorPickerTrigger>
    <ColorPickerSwatch />
  </ColorPickerTrigger>
  <ColorPickerContent>
    <ColorPickerArea />
    <div className="flex items-center gap-2">
      <ColorPickerEyeDropper />
      <div className="flex flex-1 flex-col gap-2">
        <ColorPickerHueSlider />
        <ColorPickerAlphaSlider />
      </div>
    </div>
    <div className="flex items-center gap-2">
      <ColorPickerFormatSelect />
      <ColorPickerInput />
    </div>
  </ColorPickerContent>
</ColorPicker>

Examples

Inline Color Picker

Use the inline prop to render the color picker inline instead of in a popover.

<ComponentTabs name="color-picker-inline-demo" />

Controlled State

A color picker with controlled state management.

<ComponentTabs name="color-picker-controlled-demo" />

With Form

A color picker with form integration.

<ComponentTabs name="color-picker-form-demo" />

API Reference

Root

The main container component for the color picker.

<AutoTypeTable path="./types/docs/color-picker.ts" name="RootProps" />

Trigger

The trigger button that opens the color picker popover.

<AutoTypeTable path="./types/docs/color-picker.ts" name="TriggerProps" />

Content

The content container for the color picker components.

<AutoTypeTable path="./types/docs/color-picker.ts" name="ContentProps" />

Area

The 2D color area for selecting hue and saturation.

<AutoTypeTable path="./types/docs/color-picker.ts" name="AreaProps" />

Swatch

A color swatch that displays the current color.

<AutoTypeTable path="./types/docs/color-picker.ts" name="SwatchProps" />

HueSlider

A slider for adjusting the hue value of the color.

<AutoTypeTable path="./types/docs/color-picker.ts" name="HueSliderProps" />

AlphaSlider

A slider for adjusting the alpha (transparency) value of the color.

<AutoTypeTable path="./types/docs/color-picker.ts" name="AlphaSliderProps" />

EyeDropper

A button that activates the browser's native eye dropper tool to pick colors from the screen.

<AutoTypeTable path="./types/docs/color-picker.ts" name="EyeDropperProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "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.

FormatSelect

A select dropdown for choosing the color format (hex, rgb, hsl, hsb).

<AutoTypeTable path="./types/docs/color-picker.ts" name="FormatSelectProps" />

Input

An input field that displays and allows editing of the color value in the selected format.

<AutoTypeTable path="./types/docs/color-picker.ts" name="InputProps" />

Accessibility

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["Tab"], description: "Moves focus to the next focusable element.", }, { keys: ["Shift + Tab"], description: "Moves focus to the previous focusable element.", }, { keys: ["Enter", "Space"], description: "Opens the color picker when focus is on the trigger.", }, { keys: ["Escape"], description: "Closes the color picker and moves focus to the trigger.", }, { keys: ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], description: "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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║