Color Pickers
Color pickers turn a color into something you can point at: a saturation area for the shade, a strip for the hue, another for opacity, and a text field holding the value everything else agrees on. Five blocks cover the two picker shapes a design tool opens, a gradient builder that writes out its own CSS, a compact field with the colors you used last, and a column of dots where each one opens its own hue track.
The text field does more work than the spectrum. People rarely explore a color from nothing. They arrive with a hex from a brand document, paste it, and nudge from there. So that field has to accept what actually gets pasted, with or without the hash, and it must not fight a half-typed value. The other thing worth drawing is contrast: showing how a color reads against text at the moment it is chosen catches the unreadable pairing then, not in an audit months later.
Colour picker
Best for
The picker a design tool opens: paint type, stops, spectrum and the hex in one card
Anatomy
Paint-type row · Stops bar · saturation spectrum · sampler with hue and opacity · Hex / RGB / CSS field · Recently Used with its contrast readout
Stops
Recently Used
AA5.4:1 on whiteFancy picker
Best for
The same picker as a panel: tabs for your own colours and the shared libraries, every corner pilled
Anatomy
Custom / Libraries tabs with copy and close · spectrum first · Stops · sampler · Hex / RGB / CSS field · Recently Used with its contrast readout
Stops
Recently Used
AA5.4:1 on whiteGradient builder
Best for
Building a gradient you can paste: stops, positions, angle and the CSS
Anatomy
Live preview · angle slider · a row per stop with its swatch, position and remove · Add Stop · the CSS field with copy
Gradient
Add stops, drag positions, recolor each. Copy the CSS when you’re done.
background: linear-gradient(145deg, #0B1F6B 0%, #3E6BFF 45%, #FF9AC4 100%);
Choose colour
Best for
A compact colour field: hue, opacity, a hex you can type and the colours you used last
Anatomy
Title with the live hex · hue and opacity tracks · pill field with swatch and opacity menu · clear · Recently Used ramp
Choose color
#005CF8
Recently Used
Change colour
Best for
Recolouring a list in place: a palette where each dot opens its own hue slider
Anatomy
Column of colour dots · the picked one ringed · tooltip with a tail holding the swatch and its hue track
Using Color Pickers
Reach for it when
- A theme editor where someone sets the colors the product will inherit
- Design and diagramming tools, where color is chosen many times in a session
- Building a gradient that will be pasted into a stylesheet
- Recoloring a label, a calendar or a category from the row it belongs to
Reach for something else when
- The product has a palette and the answer should come from it: show swatches, because a free spectrum invites colors that break the theme
- The color carries meaning for a status or a category; bind it to the value in code with a fixed set of tokens so it means the same thing everywhere
- Precision work on a phone: a saturation area under a fingertip cannot resolve what a pointer can, so lead with a hex field and a swatch grid
Where it shows up
Brand theme editors
An admin sets the colors the rest of the product inherits. The spectrum is for exploring, the hex field for pasting what marketing already decided, and the contrast readout catches a brand color that white text cannot sit on.
Gradient authoring
Building a fill you intend to paste into a stylesheet. A row per stop with its swatch and position, an angle slider over a live preview, and the CSS written out with a copy button so nothing is retyped.
Recoloring a list
Labels, calendars and categories where the color belongs to a row. A column of dots with the picked one ringed, and a tooltip that opens over it carrying the swatch and a hue track, so nothing navigates away.
Design tool fills
The panel a canvas opens when something is selected. Paint type, stops, spectrum, sampler and the hex in one card, with recently used colors underneath so a file stays consistent across a long session.
Questions
Which color model should a picker use?
Show HSV or HSL in the interface and store hex or RGB. Hue, saturation and value map onto the shapes people already expect (a strip for hue, an area for the rest) while RGB has no useful two-dimensional layout. Convert on the way in and on the way out instead of keeping two values that can drift apart.
Should a color picker offer an alpha channel?
Only where transparency carries meaning: overlays, highlights, shadows, selection washes. On a brand color field it invites a value that renders differently over every background and makes contrast impossible to guarantee. If you do offer it, draw the swatch over a checkerboard so a low alpha is visible, and keep the alpha in the field's text output.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.
Color Pickers
Color pickers turn a color into something you can point at: a saturation area for the shade, a strip for the hue, another for opacity, and a text field holding the value everything else agrees on. Five blocks cover the two picker shapes a design tool opens, a gradient builder that writes out its own CSS, a compact field with the colors you used last, and a column of dots where each one opens its own hue track.
The text field does more work than the spectrum. People rarely explore a color from nothing. They arrive with a hex from a brand document, paste it, and nudge from there. So that field has to accept what actually gets pasted, with or without the hash, and it must not fight a half-typed value. The other thing worth drawing is contrast: showing how a color reads against text at the moment it is chosen catches the unreadable pairing then, not in an audit months later.
Colour picker
Best for
The picker a design tool opens: paint type, stops, spectrum and the hex in one card
Anatomy
Paint-type row · Stops bar · saturation spectrum · sampler with hue and opacity · Hex / RGB / CSS field · Recently Used with its contrast readout
Stops
Recently Used
AA5.4:1 on whiteFancy picker
Best for
The same picker as a panel: tabs for your own colours and the shared libraries, every corner pilled
Anatomy
Custom / Libraries tabs with copy and close · spectrum first · Stops · sampler · Hex / RGB / CSS field · Recently Used with its contrast readout
Stops
Recently Used
AA5.4:1 on whiteGradient builder
Best for
Building a gradient you can paste: stops, positions, angle and the CSS
Anatomy
Live preview · angle slider · a row per stop with its swatch, position and remove · Add Stop · the CSS field with copy
Gradient
Add stops, drag positions, recolor each. Copy the CSS when you’re done.
background: linear-gradient(145deg, #0B1F6B 0%, #3E6BFF 45%, #FF9AC4 100%);
Choose colour
Best for
A compact colour field: hue, opacity, a hex you can type and the colours you used last
Anatomy
Title with the live hex · hue and opacity tracks · pill field with swatch and opacity menu · clear · Recently Used ramp
Choose color
#005CF8
Recently Used
Change colour
Best for
Recolouring a list in place: a palette where each dot opens its own hue slider
Anatomy
Column of colour dots · the picked one ringed · tooltip with a tail holding the swatch and its hue track
Using Color Pickers
Reach for it when
- A theme editor where someone sets the colors the product will inherit
- Design and diagramming tools, where color is chosen many times in a session
- Building a gradient that will be pasted into a stylesheet
- Recoloring a label, a calendar or a category from the row it belongs to
Reach for something else when
- The product has a palette and the answer should come from it: show swatches, because a free spectrum invites colors that break the theme
- The color carries meaning for a status or a category; bind it to the value in code with a fixed set of tokens so it means the same thing everywhere
- Precision work on a phone: a saturation area under a fingertip cannot resolve what a pointer can, so lead with a hex field and a swatch grid
Where it shows up
Brand theme editors
An admin sets the colors the rest of the product inherits. The spectrum is for exploring, the hex field for pasting what marketing already decided, and the contrast readout catches a brand color that white text cannot sit on.
Gradient authoring
Building a fill you intend to paste into a stylesheet. A row per stop with its swatch and position, an angle slider over a live preview, and the CSS written out with a copy button so nothing is retyped.
Recoloring a list
Labels, calendars and categories where the color belongs to a row. A column of dots with the picked one ringed, and a tooltip that opens over it carrying the swatch and a hue track, so nothing navigates away.
Design tool fills
The panel a canvas opens when something is selected. Paint type, stops, spectrum, sampler and the hex in one card, with recently used colors underneath so a file stays consistent across a long session.
Questions
Which color model should a picker use?
Show HSV or HSL in the interface and store hex or RGB. Hue, saturation and value map onto the shapes people already expect (a strip for hue, an area for the rest) while RGB has no useful two-dimensional layout. Convert on the way in and on the way out instead of keeping two values that can drift apart.
Should a color picker offer an alpha channel?
Only where transparency carries meaning: overlays, highlights, shadows, selection washes. On a brand color field it invites a value that renders differently over every background and makes contrast impossible to guarantee. If you do offer it, draw the swatch over a checkerboard so a low alpha is visible, and keep the alpha in the field's text output.
Related blocks
All blocksBe first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.