Three colour pickers, and the wrong one

Most colour decisions are made in the wrong colour space.

The default in most design tools, in 2021, is HSL. HSL is fine for some purposes. It is poor for the purposes designers most often need it for, which is to pick a palette that reads well together at perceived equal brightness.

A short tour of the three colour spaces a designer is most likely to encounter, and which one is the right tool for which job.

RGB / hex. The format the file ships in. Not a useful space for picking. Useful for specifying the final value, after the picking has been done in a different space. If you find yourself adjusting hex values directly, you are doing it wrong.

HSL. Hue, saturation, lightness. The default in most design tools. Looks intuitive. Has one large, hidden problem: lightness in HSL is not the same thing as perceived brightness. A yellow at HSL 60° / 100% / 50% is, to the human eye, much brighter than a blue at HSL 240° / 100% / 50%. Picking a palette by setting all the colours to the same HSL lightness produces a palette where the yellow looks loud and the blue looks dim. Most designers compensate for this by hand, badly, after the fact.

OKLCH. A more recent perceptually-uniform colour space. Designed so that two colours with the same lightness value look like they have the same perceived brightness. The result, when you pick a palette in OKLCH, is that you can set all your colours to the same lightness and they will look right together, immediately, without manual correction. The contrast pairings are also more honest: a 60% lightness value will pair predictably with a 30% or 90% lightness value, regardless of the hue.

The single tool I now keep open for any colour work is oklch.com, Evil Martians’ interactive picker. It shows the OKLCH value, the corresponding sRGB value, and a real-time preview of what the colour looks like. It also flags out-of-gamut colours, which is the second-most-useful feature. (OKLCH is wider than sRGB. Some OKLCH values cannot be displayed on a typical monitor and need to be clipped.)

For the studio’s recent work, the colour pickers in order of usefulness:

1. OKLCH, for picking the palette and reasoning about lightness pairings.
2. HSL, for the studio’s older clients whose design files are still in HSL and whose values would need a per-file rewrite to update.
3. Hex, for the final deliverable to engineering. Never for picking.

Most CSS in 2021 still ships hex values, partly because the OKLCH-in-CSS support is still landing. The next version of CSS Color (Level 4) lands native oklch() values that browsers will start rendering directly. The studios that have already moved their picking to OKLCH will be ready for it. The studios that are still picking in HSL will have to migrate twice.

A small reading list. Lea Verou’s colour writing is the most accessible technical introduction. Erik Kennedy’s piece on OKLCH is good for the practical side. The CSS Color Module Level 4 spec is the canonical reference and surprisingly readable for a spec.

Pick in OKLCH. Specify in hex. Reason about contrast in lightness, not in hue. The work will look more considered immediately.