Color Picker Panel

ProNew

A complete color picker made of the color family: area, hue and opacity sliders, hex field, eyedropper and preset swatches, in a panel or a popover, with the hue kept steady when the color goes gray or black.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/color-picker-panel

Usage

onChange receives #rrggbb, or #rrggbbaa when alpha is on and the color is not fully opaque. The panel installs the area, sliders, field, swatch picker and eyedropper; each can be used alone too.

Props

Prop	Type	Default	Description
`value` / `onChange`	`string`	-	The color.
`alpha`	`boolean`	`false`	Opacity slider and eight-digit hex.
`swatches`	`(string \| { value, name? })[]`	ten presets	`[]` hides the presets.
`eyedropper`	`boolean`	`true`	Shown only in browsers that have the API.

ColorPickerPopover adds label (accessible name, shown in the trigger name with the current hex) and disabled.

Accessibility

Every part is keyboard operable and named: the area is two range inputs, the sliders are range inputs, the hex field is a text input with validation, the presets are a radio group, the eyedropper is a button.
The popover trigger is named "Overlay color: #00000080", so the current value is read without opening it. The popover is a Radix popover: focus moves in on open, Escape closes it and focus returns to the trigger.
The colour is always available as text (the hex field), so nobody has to judge it by the swatch.

Testing

The component ships with a Testing Library test (color-picker-panel.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/color-picker-panel

Usage

Props

Prop	Type	Default	Description
`value` / `onChange`	`string`	-	The color.
`alpha`	`boolean`	`false`	Opacity slider and eight-digit hex.
`swatches`	`(string \| { value, name? })[]`	ten presets	`[]` hides the presets.
`eyedropper`	`boolean`	`true`	Shown only in browsers that have the API.

ColorPickerPopover adds label (accessible name, shown in the trigger name with the current hex) and disabled.

Accessibility

Every part is keyboard operable and named: the area is two range inputs, the sliders are range inputs, the hex field is a text input with validation, the presets are a radio group, the eyedropper is a button.
The popover trigger is named "Overlay color: #00000080", so the current value is read without opening it. The popover is a Radix popover: focus moves in on open, Escape closes it and focus returns to the trigger.
The colour is always available as text (the hex field), so nobody has to judge it by the swatch.

Testing

The component ships with a Testing Library test (color-picker-panel.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.