ColorPicker

The ColorPicker component provides an intuitive interface for color selection, supporting multiple color formats (HEX, RGB, HSL) with optional alpha channel. It includes a color wheel for hue and saturation selection, sliders for lightness and alpha, and direct color value input.

Examples

Basic Usage

Color

<ColorPicker label="Color" />

With Initial Value

Color

<ColorPicker
  label="Color"
  value="#FF0000"
/>

RGB Format

Color

<ColorPicker
  label="Color"
  format="rgb"
  value="rgb(255, 0, 0)"
/>

With Alpha Channel

Color

<ColorPicker
  label="Color"
  format="rgba"
  showAlpha={true}
  value="rgba(255, 0, 0, 0.5)"
/>

HSL Format

Color

<ColorPicker
  label="Color"
  format="hsl"
  value="hsl(0, 100%, 50%)"
/>

With Error

Color

<ColorPicker
  label="Color"
  error="Please select a valid color"
/>

Theme Colors

Primary Color

Secondary Color

<ColorPicker
  label="Primary Color"
  value="rgb(var(--color-primary-500))"
  format="rgb"
/>
<ColorPicker
  label="Secondary Color"
  value="rgb(var(--color-secondary-500))"
  format="rgb"
/>

Props

Prop	Type	Default	Description
`value`	`string`	`'#000000'`	Color value in current format
`format`	`'hex' \| 'rgb' \| 'rgba' \| 'hsl' \| 'hsla'`	`'hex'`	Color format
`showAlpha`	`boolean`	`false`	Whether to show alpha channel
`label`	`string`	`'Color'`	Input label
`disabled`	`boolean`	`false`	Whether the picker is disabled
`error`	`string`	`''`	Error message
`class`	`string`	`''`	Additional CSS classes

Events

Event	Detail Type	Description
`onchange`	`{ value: string }`	Fired when color value changes

Color Formats

The ColorPicker supports the following color formats:

hex - #RRGGBB
rgb - rgb(r, g, b)
rgba - rgba(r, g, b, a)
hsl - hsl(h, s%, l%)
hsla - hsla(h, s%, l%, a)

Accessibility

The ColorPicker follows accessibility best practices:

Color wheel uses proper ARIA roles and labels
Sliders have descriptive labels
Color values are displayed in text format
Keyboard navigation support
High contrast color preview
Error states are properly indicated

Keyboard Interaction

Enter or Space - Open/close color picker
Tab - Navigate through controls
Arrow keys - Adjust slider values
Escape - Close color picker