Color Picker

Installation

npx shadcn@latest add https://prototyper-ui.com/r/color-picker.json

This will add the following files to your project:

components/ui/color-picker.tsx
lib/color-utils.ts

Usage

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerInput,
  ColorPickerSlider,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

<ColorPicker defaultValue="#6366f1">
  <ColorPickerTrigger />
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerSlider channel="hue" />
    <ColorPickerInput />
  </ColorPickerContent>
</ColorPicker>

Anatomy

<ColorPicker>
  <ColorPickerTrigger />
  <ColorPickerContent>
    <ColorPickerArea>
      <ColorPickerAreaThumb />
    </ColorPickerArea>
    <ColorPickerSlider channel="hue">
      <ColorPickerSliderThumb />
    </ColorPickerSlider>
    <ColorPickerSlider channel="alpha">
      <ColorPickerSliderThumb />
    </ColorPickerSlider>
    <ColorPickerEyeDropper />
    <ColorPickerInput />
    <ColorPickerSwatches>
      <ColorPickerSwatch />
    </ColorPickerSwatches>
  </ColorPickerContent>
</ColorPicker>

Sub-component	`data-slot`	Purpose	Required
`ColorPicker`	`color-picker`	Root context provider, manages color state	Yes
`ColorPickerTrigger`	`color-picker-trigger`	Button that opens the popover	No
`ColorPickerContent`	`color-picker-content`	Popover panel containing controls	No
`ColorPickerArea`	`color-picker-area`	2D lightness × chroma gradient	Yes
`ColorPickerAreaThumb`	`color-picker-area-thumb`	Draggable dot in the area	No
`ColorPickerSlider`	`color-picker-slider`	1D channel slider (hue or alpha)	Yes
`ColorPickerSliderThumb`	`color-picker-slider-thumb`	Slider thumb	No
`ColorPickerInput`	`color-picker-input`	Text input for hex/color values	No
`ColorPickerEyeDropper`	`color-picker-eye-dropper`	EyeDropper API button (progressive)	No
`ColorPickerSwatches`	`color-picker-swatches`	Grid container for preset colors	No
`ColorPickerSwatch`	`color-picker-swatch`	Clickable preset color button	No

Examples

With Swatches

Alpha Channel

Inline

Form Integration

Disabled

Styling

Data Slots

Use data-slot attributes to target specific parts of the color picker:

Slot name	Element
`color-picker`	Root wrapper
`color-picker-trigger`	Trigger button with swatch preview
`color-picker-content`	Popover panel
`color-picker-area`	2D color gradient canvas
`color-picker-area-thumb`	Draggable dot on the area
`color-picker-slider`	Hue or alpha slider track
`color-picker-slider-thumb`	Slider thumb circle
`color-picker-input`	Hex text input
`color-picker-eye-dropper`	EyeDropper button
`color-picker-swatches`	Swatches grid container
`color-picker-swatch`	Individual swatch button

Customization Examples

/* Make the color area taller */
[data-slot="color-picker-area"] {
  @apply aspect-[4/3];
}

/* Larger swatches */
[data-slot="color-picker-swatch"] {
  @apply size-8 rounded-full;
}

{/* Wider popover panel */}
<ColorPickerContent className="w-80">
  {/* ... */}
</ColorPickerContent>

API Reference

ColorPicker

Root component that manages color state and provides context.

Prop	Type	Default	Description
`value`	`string`	-	Controlled CSS color string
`defaultValue`	`string`	`"#6366f1"`	Uncontrolled initial color
`onValueChange`	`(value: string) => void`	-	Called on every change (live)
`onValueCommit`	`(value: string) => void`	-	Called on pointer up or Enter
`outputFormat`	`"hex" \| "oklch" \| "rgb" \| "hsl"`	`"hex"`	Format for emitted color strings
`name`	`string`	-	Hidden input name for form submission
`disabled`	`boolean`	`false`	Disable all interactions
`enableAlpha`	`boolean`	`false`	Show alpha channel controls
`open`	`boolean`	-	Controlled popover open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when popover opens/closes
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Color picker content

ColorPickerTrigger

Button that shows a swatch preview and opens the popover.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Custom trigger content (defaults to hex value)
`...props`	`PopoverPrimitive.Trigger.Props`	-	All Base UI Popover.Trigger props

ColorPickerContent

Popover panel wrapping the color controls.

Prop	Type	Default	Description
`sideOffset`	`number`	`8`	Distance from trigger
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to trigger
`className`	`string`	-	Additional CSS classes
`...props`	`PopoverPrimitive.Popup.Props`	-	All Base UI Popover.Popup props

ColorPickerArea

2D gradient area for selecting lightness (Y) and chroma (X).

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Custom thumb (defaults to ColorPickerAreaThumb)

ColorPickerAreaThumb

Draggable dot positioned within the color area.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ColorPickerSlider

1D slider for hue or alpha channel.

Prop	Type	Default	Description
`channel`	`"hue" \| "alpha"`	-	Which channel to control
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Custom thumb (defaults to ColorPickerSliderThumb)

ColorPickerSliderThumb

Slider thumb circle.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ColorPickerInput

Text input for typing color values directly.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ColorPickerEyeDropper

Button that activates the browser EyeDropper API. Only renders when the API is available.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ColorPickerSwatches

Grid container for preset color buttons.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	ColorPickerSwatch elements

ColorPickerSwatch

Clickable preset color button.

Prop	Type	Default	Description
`value`	`string`	-	CSS color string for this preset
`className`	`string`	-	Additional CSS classes

Accessibility

Keyboard Interactions

Key	Action
`Arrow keys`	Move thumb in the color area or adjust slider value
`Shift + Arrow keys`	Fine-step adjustment
`Home`	Set chroma to minimum (area) or slider to minimum
`End`	Set chroma to maximum (area) or slider to maximum
`PageUp`	Set lightness to maximum (area only)
`PageDown`	Set lightness to minimum (area only)
`Enter`	Confirm text input value
`Tab`	Move focus between area, sliders, input, and swatches

ARIA Attributes

The color area and sliders use role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
aria-valuetext on the area provides a human-readable description of the current color position.
aria-label is set on each slider to identify the channel (Hue, Alpha).
The EyeDropper button is a standard <button> element and only renders when the API is supported.

On this page