Color Picker
A control for choosing a colour: a saturation and brightness square, a hue strip, and a hex field for exact values, with a row of preset swatches for quick picks.
Preview
When to use
- Where people set a brand or theme colour and need any value, not just a preset.
- For labels, tags and calendars, where a short swatch row covers most choices.
Reach for something else
- When only a handful of fixed colours are allowed: a Radio group of swatches is simpler.
Anatomy
- 1
Saturation square
Saturation left to right, brightness top to bottom, for the current hue.
- 2
Hue strip
A horizontal rainbow that sets the hue of the square.
- 3
Handles
A white ring on each surface marking the current value.
- 4
Hex field
Text input for an exact value; it updates the handles when valid.
- 5
Swatches
Optional presets under the field.
States
Default
Handles at the current value.
Dragging
The handle follows the pointer; the preview updates live.
Focus
A ring around the focused handle or field.
Invalid hex
The field shows an error until the value parses; the colour holds its last valid value.
Accessibility
- The hue strip is role="slider" with aria-valuenow in degrees; the arrow keys step it.
- The square is focusable and moves with the arrow keys, announcing saturation and brightness.
- The hex field is a labelled text input, so the colour can be set without a pointer at all.
- Swatches are buttons named by their colour, not only shown by it.
Source
The Color Picker is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block