Color Picker

Edits colors through optional RGB, Hex, RGBA, RYB, CMYK, HSL, HSV, and preset controls.

@rivetui/color-picker

Preview

Explore each composition interactively, then open its code in the same context.

Controlled

Keep the selected color in application state while exposing only the required input modes.

Note

Pass one mode or an array to inputs. Supported modes are hex, rgb, rgba, ryb, cmyk, hsl, and hsv. displayFormat only changes the closed trigger value.

Brand color

Every input edits the same normalized color value.

Transparency

Use an alpha-capable format when opacity is part of the value.

Note

Switching to a format without alpha intentionally returns the color to full opacity.

Presets only

Omit input modes when users should choose from a controlled palette.

Note

The presets array is optional. When disabled, editing is locked but the displayed value can still be copied.

Registry

Installation

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/color-picker

Inspect registry item

Public interface

API reference

Component-specific props are listed here. Native element and Base UI props continue to pass through.

Prop	Type	Default
`value`	`string`	`—`
`defaultValue`	`string`	`"#18181B"`
`displayFormat`	`ColorPickerInput`	`"hex"`
`onValueChange`	`(value: string) => void`	`—`
`inputs`	`ColorPickerInput \| readonly ColorPickerInput[]`	`"rgb" without presets`
`presets`	`readonly string[]`	`—`
`name`	`string`	`—`
`open`	`boolean`	`—`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean, details) => void`	`—`
`disabled`	`boolean`	`false`