Color Picker

Pro

Colour picker with a shade board, hue and opacity sliders, hex entry and preset swatches. The cursor shows the picked colour live, and a compact mode tucks it all behind a swatch row.

Preview

Installation

npx @lumioui/cli add pro/color-picker

Usage

import { hsvToRgb, hsvToHex, hexToHsv, hsvaToRgba, hsvLuma, ColorPicker } from "@/components/ui/color-picker/color-picker";
<ColorPicker />

Also exported: hsvToRgb, hsvToHex, hexToHsv, hsvaToRgba, hsvLuma.

Examples

Compact

A to-do app's "List info" sheet.

Inline

The full board on a calendar's "Edit calendar" screen.

API reference

Prop Type Default
value string

Controlled hex — #rrggbb or #rrggbbaa when showAlpha.

 —
defaultValue string

Uncontrolled seed (default #3B82F6).

 DEFAULT_COLOR
onChange (hex: string) => void

Emits #rrggbb / #rrggbbaa — throttled while dragging, and once more with the settled colour on release.

 —
onChangeComplete (hex: string) => void

Fires once per finished interaction (release, tap, hex commit) with the settled colour — the place to persist.

 —
presets string[]

Preset swatches — tapping snaps + ticks; releasing a drag within ~5% of one snaps to it too.

 DEFAULT_PRESETS
showAlpha boolean

Show the alpha channel slider + emit 8-digit hex (default true).

 true
variant "inline" | "compact"

inline renders the full board; compact collapses it into a popover behind a swatch row (default inline).

 "inline"
liveColor SharedValue<HsvColor>

Written on the UI thread with the HSVA under the finger on every frame of a drag (and on every settled change) — drive a live preview from it with hsvaToRgba / hsvLuma in an animated style, with no lag.

 —
disabled boolean —
className string —