Color Picker

Forms

Selection

Select colors from a preset palette or enter custom hex values. Features color preview, native color picker integration, and input validation.

Preview

Color selection with preset palette and hex input

Primary Color

Without Hex Input

Only preset colors, no manual hex input

Brand Color

Custom Preset Colors

Custom color palette for specific use cases

Accent Color

Disabled State

Color picker in disabled state

Disabled

Props

ColorPicker component API reference

Prop	Type	Default	Description
`value`	`string`	—	Selected hex color value (e.g., "#4f46e5")
`onChange`	`(color: string) => void`	—	Callback when color changes
`label`	`string`	—	Label text above the picker
`presetColors`	`string[]`	`[18 colors]`	Array of preset hex colors
`showInput`	`boolean`	`true`	Show hex input field in dropdown
`disabled`	`boolean`	`false`	Disable the color picker
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { ColorPicker } from '@/components/ui/color-picker'

export default function Example() {
  const [color, setColor] = useState('#4f46e5')

  return (
    <>
      {/* Basic usage */}
      <ColorPicker
        label="Brand Color"
        value={color}
        onChange={setColor}
      />

      {/* Without hex input */}
      <ColorPicker
        label="Theme Color"
        value={color}
        onChange={setColor}
        showInput={false}
      />

      {/* Custom preset colors */}
      <ColorPicker
        label="Accent Color"
        value={color}
        onChange={setColor}
        presetColors={['#ef4444', '#f97316', '#14b8a6', '#3b82f6']}
      />
    </>
  )
}

Features

Built-in functionality

18 preset colors: Organized 6x3 grid of common colors
Large color preview: Preview area shows selected color
Hex input with validation: Manual hex entry with format validation
Native color picker: Integration with browser color picker
Click outside to close: Dropdown closes on outside click
Customizable presets: Define your own preset color palette
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Trigger button is focusablePreset colors are individual buttonsHex input has proper input semantics

Keyboard Navigation

Key	Action
`Tab`	Navigate to trigger button
`Enter / Space`	Open color picker dropdown
`Escape`	Close dropdown

Notes

Selected color shown as visual indicator with ring
Hex value displayed in monospace font for clarity
Color preview helps users with color identification

Related Components

Input Select Popover