Color Picker

Use Color Picker when users need to choose a precise color rather than select from a fixed palette. It supports HEX, RGB, HSL, and OKLCH output while keeping the picker state in OKLCH.

The component is composed from a root, two-dimensional color area, hue slider, optional alpha slider, formatted input, and mode selector. Include only the controls your interface needs.

The area changes saturation and brightness in standard output modes, and chroma and lightness in OKLCH mode. The hue and alpha controls can be dragged, while the area also supports arrow keys for precise adjustment.

Keep a visible text value alongside the visual controls. The color area and sliders expose keyboard-operable range controls, and the mode selector uses the Select component's native keyboard behavior.

npx honestui@latest add color-picker

"use client";

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

<ColorPicker defaultValue="#3E63DD">
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Alpha />
  <div className="flex items-center gap-3">
    <ColorPicker.Input copyable />
    <ColorPicker.Mode />
  </div>
</ColorPicker>

Controlled Value

Use value and onValueChange when the selected color needs to drive another part of the interface.

OKLCH Output

Set defaultMode="oklch" to begin with perceptual lightness, chroma, and hue controls.

<ColorPicker defaultValue="oklch(0.62 0.18 265)" defaultMode="oklch">
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Input />
  <ColorPicker.Mode />
</ColorPicker>

ColorPicker

• value and defaultValue accept any color string supported by Culori.
• onValueChange(value, mode) runs whenever a color control changes.
• mode and defaultMode control the output format.
• onModeChange(mode) runs when the format selector changes.

Parts

• ColorPicker.Area renders the two-dimensional color surface.
• ColorPicker.Hue renders the hue slider.
• ColorPicker.Alpha renders the opacity slider.
• ColorPicker.Input renders the formatted, read-only value and supports copyable.
• ColorPicker.Mode renders the format selector and supports a custom options array.