Color Picker

HSV picker with sliders, format readouts, hex input, and eyedropper.

Installation

npx shadcn@latest add @iconiq/color-picker

Props

ColorPicker

Self-contained HSV panel with saturation field, hue/alpha sliders, multi-format readouts, and EyeDropper.

valuestring

Controlled hex color such as #3B82F6. When provided, the picker syncs its internal state to this value.

defaultValuestring

Default #3B82F6

Starting color for uncontrolled usage. Ignored when value is supplied.

onChange(color: string) => void

Called when the color settles (pointer up on sliders, blur/Enter on inputs). Emits #RRGGBB, or #RRGGBBAA when alpha is below 100%.

defaultAlphanumber

Default 100

Starting alpha percentage (0–100) for uncontrolled usage when defaultValue has no alpha channel.

disabledboolean

Default false

Disables picker interaction and lowers shell opacity.

showEyedropperboolean

Default true

Shows or hides the pipette control in the footer row.

onEyedropperUnsupported() => void

Called when EyeDropper is unavailable. No alert dialog is shown by default.

classNamestring

Merged onto the outer picker shell for width, shadow, or layout overrides.

Install with npx shadcn@latest add https://iconiqui.com/r/color-picker.json (requires lucide-react, motion, and a cn helper).

Theme tokens are embedded on the root node so the picker works without iconiq-theme, though it still maps cleanly to shadcn semantic colors.

The saturation square, hue slider, and alpha slider share one RGB source of truth. Slider drags emit on pointer up to stay stable in controlled mode.

Format switching exposes editable HEX, RGB, HSL, and OKLCH channels. Values commit on blur or Enter so partial typing does not fight the live color state.

EyeDropper support depends on the browser API (Chrome/Edge). Use onEyedropperUnsupported for user-facing feedback.

FluidColorPicker remains exported as a backward-compatible alias for older imports.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: lucide-react, motion.

This page documents the shared Iconiq color picker. Base UI and Radix UI options are disabled because there is no primitive-specific variant.

The generated registry file is /r/color-picker.json.