The hardest colour is grey

Ask a designer to show you the part of a brand palette they are least happy with, and it is almost never the accent. It is the greys.

The accent colour gets the attention. It is the one the client reacts to, the one that goes on the button, the one that ends up in the brand guidelines with a name and a story. The greys get picked last, in a hurry, usually by dragging the saturation slider to zero and tapping out a ladder from near-black to near-white. The result is a set of neutrals that are technically grey and visually dead. They look like the absence of a decision, because they are.

A good grey is not the absence of colour. It is a colour with most of its chroma removed but not all of it. Pure neutral greys, the ones with zero saturation, read as cold and a little clinical, because almost nothing in the physical world is a true neutral. Paper is warm. Concrete is cool. Shadows take a tint from whatever is around them. A grey ramp that carries a faint, consistent hue feels like a material rather than a default, and the hue you reach for is almost always a small lean toward the brand’s accent. A warm brand wants greys with a touch of red or yellow in them. A cool brand wants a trace of blue. The shift should be small enough that nobody consciously notices it and large enough that the page feels of a piece.

The second thing that goes wrong is the spacing of the steps. A ramp built by eye, or by evenly dividing hex values, has uneven jumps in perceived lightness, because the old #rrggbb space is not perceptually uniform. Two steps that look one stop apart at the dark end can look three stops apart at the light end. This is the problem OKLCH was built to solve. Set lightness on an even scale, hold a low constant chroma, hold the hue, and the steps come out evenly spaced to the eye rather than evenly spaced in a number that the eye does not care about. The OKLCH colour picker makes the relationship visible while you work, and it is the fastest way I know to build a ramp that climbs smoothly.

A grey ramp I am happy with usually has more steps at the light end than feels necessary. The dark greys do heavy, obvious work: text, borders, the occasional dark surface. The light greys do quiet, frequent work: the page background, the card that is one shade off the page, the hairline divider, the disabled state, the hover. Those near-white shades are where most interfaces feel either considered or cheap, and the difference between two of them is often a single step of lightness and a degree or two of hue. It rewards the extra steps.

The test, in the end, is the same one I apply to type at small sizes. Build the ramp, then look at it in the place it actually lives: the real interface, on a real screen, next to the accent, not in the swatch grid where every colour looks fine. The companion post on colour at small sizes covers the related failure, which is that the colour you specified is not the colour the user sees once it is small enough or pale enough. Greys are where that gap is widest.

Refactoring UI by Adam Wathan and Steve Schoger is the most practical treatment of building neutral ramps for interfaces, and Lea Verou has written more clearly than anyone about why the maths matters. The short version is the one worth keeping: spend your colour effort on the greys. The accent will mostly look after itself.