Color Picker

A feature-rich color picker component with support for multiple color formats, contrast ratio display, opacity control, and recent colors tracking.

Full Preset

The full preset includes all features: color area, hue slider, opacity slider, contrast display, and format selection.

Color picker

Normal

5.10 : 1

import { ColorPickerFull } from '@/components/ColorPicker'

<ColorPickerFull defaultValue="#335CFF" />

Controlled

Use the value and onValueChange props for controlled usage.

Color picker

Normal

5.74 : 1

Selected color:

#FB3748

import { ColorPickerFull } from '@/components/ColorPicker'
import { useState } from 'react'

function ControlledExample() {
  const [color, setColor] = useState('#FB3748')

  return <ColorPickerFull value={color} onValueChange={setColor} />
}

Mini Preset

A compact color picker with hex display and color swatches, ideal for quick color selection.

#335CFF

100%

Recent colors

import { ColorPickerMini, DEFAULT_PRESET_COLORS } from '@/components/ColorPicker'

<ColorPickerMini
  defaultValue="#335CFF"
  presetColors={DEFAULT_PRESET_COLORS}
/>

Custom Colors

Provide custom preset colors with a custom label.

#FF7F00

100%

Brand colors

const brandColors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#8B00FF']

<ColorPickerMini
  defaultValue="#FF7F00"
  presetColors={brandColors}
  swatchesLabel="Brand colors"
/>

Popover Mode

Both presets can be rendered as popovers with trigger buttons.

<ColorPickerFull asPopover defaultValue="#335CFF" />
<ColorPickerMini asPopover defaultValue="#1FC16B" presetColors={DEFAULT_PRESET_COLORS} />

Custom Trigger

Provide a custom trigger element for the popover.

<ColorPickerFull
  asPopover
  defaultValue="#7D52F4"
  trigger={
    <button className="px-4 py-2 bg-primary-base text-white rounded-md">
      Choose Color
    </button>
  }
/>

Contrast Display

The color picker automatically calculates and displays contrast ratios against white (#FFFFFF) and black (#000000), showing WCAG compliance levels (AAA, AA, or Fail).

Color picker

Normal

5.10 : 1

// Contrast display is enabled by default
<ColorPickerFull defaultValue="#335CFF" />

// Hide contrast display
<ColorPickerFull defaultValue="#335CFF" hideContrast />

Stripping Features

The full preset can be customized by hiding various features.

Hide Contrast

Color picker

Normal

<ColorPickerFull defaultValue="#7D52F4" hideContrast />

Hide Header (Title + Contrast)

<ColorPickerFull defaultValue="#FA7319" hideHeader />

Hide Opacity

Color picker

Good

10.43 : 1

AAA

<ColorPickerFull defaultValue="#47C2FF" hideOpacity />

Minimal

Hide all optional features for a minimal color picker.

<ColorPickerFull
  defaultValue="#22D3BB"
  hideHeader
  hideOpacity
  hideFormatSelect
/>

Color Formats

The color picker supports HEX, RGB, and HSL formats.

HEX Format

Color picker

Normal

5.10 : 1

<ColorPickerFull defaultValue="#335CFF" defaultFormat="hex" />

RGB Format

Color picker

Normal

5.10 : 1

<ColorPickerFull defaultValue="#335CFF" defaultFormat="rgb" />

HSL Format

Color picker

Normal

5.10 : 1

<ColorPickerFull defaultValue="#335CFF" defaultFormat="hsl" />

Compound Components

For full control, use the compound component API to build custom layouts.

Basic

import { ColorPicker } from '@/components/ColorPicker'

<ColorPicker.Root defaultValue="#335CFF">
  <div className="flex flex-col gap-4 p-4" style={{ width: 280 }}>
    <ColorPicker.Area size={248} />
    <ColorPicker.HueSlider />
    <ColorPicker.Input />
  </div>
</ColorPicker.Root>

With Opacity

<ColorPicker.Root defaultValue="#1FC16B" defaultAlpha={0.75}>
  <div className="flex flex-col gap-4 p-4" style={{ width: 280 }}>
    <ColorPicker.Area size={248} />
    <ColorPicker.HueSlider />
    <ColorPicker.OpacitySlider />
    <div className="flex gap-1.5">
      <ColorPicker.FormatSelect />
      <ColorPicker.Input />
    </div>
  </div>
</ColorPicker.Root>

With Swatches

Preset colors

import { ColorPicker, DEFAULT_PRESET_COLORS } from '@/components/ColorPicker'

<ColorPicker.Root defaultValue="#7D52F4">
  <div className="flex flex-col gap-4 p-4" style={{ width: 280 }}>
    <ColorPicker.Area size={248} />
    <ColorPicker.HueSlider />
    <ColorPicker.Swatches label="Preset colors" colors={DEFAULT_PRESET_COLORS} />
  </div>
</ColorPicker.Root>

Popover

<ColorPicker.Root asPopover defaultValue="#FA7319">
  <ColorPicker.Trigger>
    <ColorPicker.TriggerButton />
  </ColorPicker.Trigger>
  <ColorPicker.Portal>
    <ColorPicker.Content>
      <div className="flex flex-col gap-4 p-4" style={{ width: 280 }}>
        <ColorPicker.Area size={248} />
        <ColorPicker.HueSlider />
        <ColorPicker.Input />
      </div>
    </ColorPicker.Content>
  </ColorPicker.Portal>
</ColorPicker.Root>

All Variants

Full Preset

Color picker

Normal

5.10 : 1

Mini Preset

#1FC16B

100%

Recent colors

Full Popover

Mini Popover

Props

ColorPickerFull

Prop	Type	Default	Description
`value`	`string`	-	Controlled color value (hex)
`defaultValue`	`string`	`'#335CFF'`	Default color value
`onValueChange`	`(value: string) => void`	-	Callback when color changes
`alpha`	`number`	-	Controlled opacity (0-1)
`defaultAlpha`	`number`	`1`	Default opacity
`onAlphaChange`	`(alpha: number) => void`	-	Callback when opacity changes
`defaultFormat`	`'hex' \| 'rgb' \| 'hsl'`	`'hex'`	Default color format
`asPopover`	`boolean`	`false`	Render as popover
`trigger`	`ReactNode`	-	Custom trigger (popover mode)
`hideHeader`	`boolean`	`false`	Hide header section
`hideContrast`	`boolean`	`false`	Hide contrast display
`hideOpacity`	`boolean`	`false`	Hide opacity slider
`hideFormatSelect`	`boolean`	`false`	Hide format selector

ColorPickerMini

Prop	Type	Default	Description
`value`	`string`	-	Controlled color value (hex)
`defaultValue`	`string`	`'#335CFF'`	Default color value
`onValueChange`	`(value: string) => void`	-	Callback when color changes
`alpha`	`number`	-	Controlled opacity (0-1)
`defaultAlpha`	`number`	`1`	Default opacity
`asPopover`	`boolean`	`false`	Render as popover
`trigger`	`ReactNode`	-	Custom trigger (popover mode)
`presetColors`	`string[]`	-	Custom preset colors
`swatchesLabel`	`string`	`'Recent colors'`	Label for swatches

Compound Components

Component	Description
`ColorPicker.Root`	Root provider with color state
`ColorPicker.Area`	Saturation/brightness selection area
`ColorPicker.HueSlider`	Hue selection slider
`ColorPicker.OpacitySlider`	Opacity selection slider
`ColorPicker.Input`	Color value input field
`ColorPicker.FormatSelect`	Color format dropdown
`ColorPicker.Header`	Title with color preview
`ColorPicker.Contrast`	Contrast ratio display
`ColorPicker.Swatches`	Color swatch grid
`ColorPicker.Swatch`	Individual color swatch
`ColorPicker.Trigger`	Popover trigger wrapper
`ColorPicker.TriggerButton`	Default trigger button
`ColorPicker.Portal`	Popover portal
`ColorPicker.Content`	Popover content container

Utilities

The color picker exports utility functions for color manipulation:

import {
  hexToRgb,
  rgbToHex,
  hexToHsl,
  hslToHex,
  calculateContrastRatio,
  getWcagLevel,
  isValidHex,
  normalizeHex,
} from '@/components/ColorPicker'

// Convert colors
const rgb = hexToRgb('#335CFF') // { r: 51, g: 92, b: 255 }
const hex = rgbToHex({ r: 51, g: 92, b: 255 }) // '#335CFF'

// Calculate contrast
const ratio = calculateContrastRatio('#335CFF', '#FFFFFF') // ~4.5
const level = getWcagLevel(ratio) // 'AA' or 'AAA' or 'Fail'

// Validate hex
isValidHex('#335CFF') // true
normalizeHex('335cff') // '#335CFF'