Why Your Grays Aren’t Really Neutral

A palette review that repeats across teams: the brand color is right, the type is right, but the interface feels cold — clinical, faintly detached from the brand it’s dressed in. Suspicion falls on the brand color; the culprit is usually the gray scale. It was built from pure grays — equal RGB channels, chroma zero, mathematically colorless — and next to a colored palette, pure grays tend to read like parts shipped in from another product.

Pure RGB grays exist, and they are mathematically neutral — but they rarely look neutral next to brand colors, because the eye judges “no color” against the colors around it. The practical fix is the tinted neutral: a whisper of chroma, roughly 0.005–0.02 in OKLCH, toward the brand hue, which makes the gray scale feel like it belongs to the palette rather than merely coexisting with it. Both halves of that claim — the perceptual drift and the precise fix — are the subject of this article, part of our OKLCH guide.

Why does a mathematically neutral gray look cold?

Because neutrality is not measured by the visual system — it is negotiated. The research background is chromatic adaptation: the visual system continuously rebalances what counts as neutral against the light and color surrounding it, which is why a white page looks white under a warm bulb and under blue daylight alike — the formal treatment lives under chromatic adaptation. The eye is not a colorimeter reporting absolute values; it is an instrument that keeps re-zeroing itself against context.

On a screen, the palette is part of that context. Surround a chroma-zero gray with a warm brand palette and the adapted eye’s neutral point drifts warm — the mathematically neutral gray now sits on the cool side of it, and reads cold and detached. The gray didn’t change; the reference point did. What looks neutral in a design is not chroma zero — it is whatever agrees with the palette’s own temperature.

What is a tinted neutral?

A gray that concedes the point: instead of chroma zero, it carries a whisper of chroma — commonly somewhere between 0.005 and 0.02 in OKLCH terms — aimed at the brand hue. That amount is far below what reads as a color; a single swatch of it still looks gray. What it does is shift the scale’s temperature until the grays and the brand colors agree on what neutral means. This is why UIs so commonly run warm grays with warm brands and cool grays with cool brands: the practice is chromatic adaptation, applied.

The dosage logic is worth spelling out: at 0.005 the tint is barely measurable; around 0.01 it is invisible in a swatch but felt across a large surface; by 0.02 an attentive eye starts naming the hue. Backgrounds and large fields sit at the low end, small dark UI chrome can take slightly more.

Why is this precise in OKLCH and vague in HSL?

Because OKLCH’s chroma is an absolute quantity. “Chroma 0.01 at hue 263” means the same amount of color at every lightness step of the scale — one line fully specifies the tint for the entire gray ramp. HSL can’t state the rule that way: its saturation is a percentage of whatever each hue and lightness happens to allow, so “add 2% saturation” delivers a different actual amount of color at every step — more in the midtones, less near the ends — and a different amount again if the brand hue changes. The tinted-neutral recipe exists in both models; only in OKLCH is it portable.

What do tinted neutrals look like in numbers?

Here is the same lightness curve twice — once at chroma 0, once at chroma 0.01 toward hue 263, the hue of a #2563eb-class brand blue:

Read the tinted column closely: the channels are no longer equal — red sits two or three points below green, green a few below blue, at every step. In a table cell the two columns look nearly identical, and that is honest: the difference is designed to be invisible at swatch size. It surfaces at surface size — page backgrounds, cards, sidebars — where the tinted scale reads as belonging to the blue palette and the pure scale reads as absent from it.

This is why a neutral scale is generated as part of the palette, not picked separately afterward. Open a brand palette with its neutral scale in Scale Composer — the neutral ramp is generated alongside the brand colors, carrying its whisper of chroma toward the brand hue on the same lightness logic as the colored scales.

How warm or cool should your grays run?

That is a brand judgment, not a formula — a warm, human brand and a cold, technical one deserve grays with different tempers, and the honest range runs from nearly-pure to distinctly tinted. But it is a judgment best made by eye, at full size, with both candidates on screen. Flip the neutral scale between pure and tinted — same lightness curve, chroma 0 against chroma 0.01 at the brand hue — and watch the surfaces, not the swatches. One of the two will feel like it came with the brand.