Color Picker

A palette first, free entry second. Most product colour pickers choose a label or category colour, where an arbitrary hex is a liability — a gradient invites a colour nobody can read text on.

src/components/ui/color-picker.tsx

About

From the component's own source, where it was written.

Pick a colour from a swatch set, or type one.

A palette first, free entry second. Most product colour pickers exist to choose a label or a category colour, where an arbitrary hex is a liability — a saturation-value gradient invites a colour nobody can read text on.

The native input[type=color] is offered as an escape hatch rather than the main control: it opens the OS picker, which cannot be styled and looks nothing like the rest of a form.

Swatch ticks use readableInk, shared with LabelPicker, so the check mark is visible on both a pale yellow and a navy.

clearable exists because "no colour" is a real value, not an empty state — a tint that falls back to a named colour set, a label with no colour yet. The trigger says so in words rather than showing an empty swatch.

Install

npx astralyx-ui add color-picker

Usage

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

<ColorPicker value={color} onValueChange={setColor} />

Composer

Change the props and the source below follows.

Props

allowCustom

tsx

<ColorPicker
  value={color}
  onValueChange={setColor}
  allowCustom={true}
/>

Examples

Palette

tsx

<ColorPicker defaultValue="#8b5cf6" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ColorPicker`

Extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'>.

Prop	Type	Default	Description
value	string	—	Any CSS colour; the palette supplies hex.
defaultValue	string	'#3b82f6'	—
onValueChange	(value: string) => void	—	Any CSS colour; the palette supplies hex.
swatches	string[]	DEFAULT_SWATCHES	Overrides the default twenty. `DEFAULT_SWATCHES` is exported.
allowCustom	boolean	true	Adds the hex field and the native picker. The native input is an escape hatch, not the main control — it opens the unstyleable OS picker.
clearable	boolean	false	Allow clearing back to no colour.
unsetLabel	string	'Unset'	—
chooseLabel	string	'Choose a colour'	Accessible name for the trigger when nothing is chosen.
clearLabel	string	'Clear colour'	—
hexLabel	string	'Hex colour'	Accessible name for the hex field.
systemPickerLabel	string	'Open the system colour picker'	—
swatchLabel	(colour: string) => string	DEFAULT_SWATCH_LABEL	Accessible name for a swatch, given its value.
size	keyof typeof fieldSize	'md'	—
variant	'default' \| 'secondary' \| 'ghost'	'default'	—
disabled	boolean	false	—

Functions

Function	Signature	Description
DEFAULT_SWATCHES	string[]	Pick a colour from a swatch set, or type one.

Behaviour

Topic	Detail	Description
tick contrast	readableInk	Shared with LabelPicker, so the check mark is visible on both a pale yellow and a navy.