On this page
Overview
Show code, MinimalPicker.tsx
With alpha, one format at a time.
Show code, EveryFormat.tsx
Variants
Formats and values
The picker shows one format at a time, hex first, and the format menu switches to RGB or HSL.
- It can also show one format alone, with no menu, or several together.
- Each channel's field shows its letter, such as R, G and B, beside its number.
- A color with an alpha keeps it while it is translucent.
Several formats at once
Several formats show their fields on a row each, with a copy button each. They edit the same color: typing in one moves the others.
- The channels' letters and the hex value's # say which format a row holds.
- The letters and numbers line up from row to row.
- With an alpha, each row ends in it.
Show code, FormatsTogether.tsx
Open from a button
ColorPickerButton shows the color as a swatch and its value, and opens a picker in a popover.
- It has no fill of its own: like a field, it takes the background of what it sits on.
- One button can be given a fill of its own.
Show code, PickerButtonOpen.tsx
Preset swatches
A picker can offer colors to choose from, each with an optional name.
Show code, PresetSwatches.tsx
Color swatches
ColorSwatch shows a color as a small sample, with its value in a format and an optional label.
As the icon of an icon button, it is a rounded square whose fill shows on hover, keyboard focus and press, and while its popup is open.
Show code, Swatches.tsx
Hex, RGB and HSL, a translucent color over a checkerboard, and the small size.
Show code, SwatchFormats.tsx
Anatomy
Picker
Label
Color area
Thumb
Hue slider
Alpha slider
Format
Fields
Eyedropper
Copy
Swatches
Show code, ColorPickerAnatomy.tsx
Behaviour
States
A read-only picker can be read and copied but not changed, and a disabled one takes no input.
Copy and the eyedropper
Copy copies the color as the fields show it.
The eyedropper picks a color from the screen in browsers that offer one, on the desktop; elsewhere it never shows.
Adapting to width
The picker fills its container but stays compact in a wide one, and everything under the area and the strips takes their width.
- The strips stay upright at the area's side at every width.
- A narrow picker's area shrinks.
- The format menu, the eyedropper and copy share a row.
- The fields take the row under it, in equal columns that keep each channel's letter in its place in every format.
Show code, FillWidth.tsx
Rules
A picker shows the color's value beside its swatch, and checks the contrast of a color that carries text.
Use it when
- Any color, such as an accent, chosen by eye, by value or from presets
- A color in a toolbar, a row or a form that opens a pickerColorPickerButton
- A chosen color shown in a list or a table, with its valueColorSwatch
Show code, PickerButton.tsx
Show code, SwatchAlone.tsx
Contrast
Where the color carries text, check its contrast and say what is wrong under the picker.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves through the area, the sliders, the format, the fields, the eyedropper and copy; with several formats, through each row's fields and copy in turn. |
| ←, → in the color area | Changes the saturation; Shift or Page Up by more. |
| ↑, ↓ in the color area | Changes the brightness; Shift or Page Up by more. |
| ↑, ↓ in a slider | Moves the hue or the alpha slider; ←, → too. |
| Home, End in a slider | Moves the hue or the alpha slider to its bottom or its top. |
| ↑, ↓ in a field | Steps its value. |
| Enter in a field | Commits what was typed, as leaving the field does. |
| ←, → in the swatches | Moves between swatches; Enter or Space chooses. |