Loading…

Color Picker

beta

Pick a colour from a saturation square, hue and alpha sliders, a hex/rgb/oklch field, swatches or the screen — with a live WCAG contrast reading.

Forms
2 files
No extra npm packages
Accessibility notes

Playground

Installation

The CLI installs input and slider as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add color-picker

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Alpha And Oklch
In APopover

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ColorPicker>

Prop	Type	Default
`alpha` Offer an alpha slider. Default false.	`boolean`	`false`
`contrastWith` A colour to measure contrast against — a background, usually. A theme token ("background") or any CSS colour. Shows the WCAG ratio and level.	`string`	—
`defaultValue` The colour it starts on, uncontrolled.	`string`	`DEFAULT_COLOR`
`disabled`	`boolean`	`false`
`eyeDropper` Show the eyedropper button where the browser supports it. Default true.	`boolean`	`true`
`format` How `onValueChange` and the field write the colour. Default "hex".	`ColorFormat`	`"hex"`
`label` Names the picker's controls, e.g. "Brand colour". Default "Colour".	`string`	`"Colour"`
`onValueChange` Called with the colour written in `format` whenever it changes.	`(value: string) => void`	—
`swatches` Colours offered as one-click swatches.	`readonly string[]`	—
`value` The colour, controlled, in any format the field accepts.	`string`	—

Plus every attribute of <div> except defaultValue, onChange.

Accessibility

Every part works by keyboard. The square is a slider named for saturation and brightness: left and right change saturation, up and down brightness, Shift for steps of ten, Home and End for none and full; its value text speaks both. Hue and opacity are standard sliders with spoken values in degrees and percent. The text field takes hex, rgb() or oklch(), marks itself invalid with a message when it cannot read a value, and Escape restores the last good one. Swatches are toggle buttons named by their colour. The contrast reading gives the ratio and the WCAG level in words, never colour alone.

Quality

Measured from the source and its tests at build time.

All scores

9/9

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

alpha

Offer an alpha slider. Default false.

boolean

false

contrastWith

A colour to measure contrast against — a background, usually. A theme token ("background") or any CSS colour. Shows the WCAG ratio and level.

string

—

defaultValue

The colour it starts on, uncontrolled.

string

DEFAULT_COLOR

disabled

boolean

false

eyeDropper

Show the eyedropper button where the browser supports it. Default true.

boolean

true

format

How onValueChange and the field write the colour. Default "hex".

ColorFormat

"hex"

label

Names the picker's controls, e.g. "Brand colour". Default "Colour".

string

"Colour"

onValueChange

Called with the colour written in format whenever it changes.

(value: string) => void

—

swatches

Colours offered as one-click swatches.

readonly string[]

—

value

The colour, controlled, in any format the field accepts.

string

—