vocab.design

color

Tinted neutral

also called hued gray (community), brand-tinted grey, gray scale companion (radix), brand-tinted gray

A grey with a trace of the brand hue mixed in, so backgrounds and borders belong to the palette instead of reading as a separate, colder system.

Most of an interface is grey. Page backgrounds, card surfaces, dividers, borders, secondary text, disabled controls: none of them are the brand colour, and all of them are what the brand colour is seen against. A pure grey has no hue at all, so the palette ends up in two halves that were designed by different people, one warm and one from nowhere. A tinted neutral closes the gap by carrying a trace of the brand hue in every step, small enough that nobody would call it blue, large enough that it stops looking like a separate system. Radix builds this into its scales by pairing each colour with a matching grey rather than one shared grey for everything.

The whole thing lives on the chroma axis, and the exact word matters: a tinted neutral is low chroma, not zero chroma. Zero chroma is a true grey, one colour per lightness, no direction. A chroma somewhere between about 0.01 and 0.02 in OKLCH is what makes the same lightness read as warm or cool instead of as colour, which is the effect being bought. Push it past about 0.03 and the greys start competing with the accent they are supposed to sit under, and the interface reads as tinted rather than as neutral.

What must not move is lightness. A tinted ramp and a pure one should match rung for rung on measured tone, so swapping one for the other changes no contrast ratio and breaks no promise the theme has already made about text on a surface. This is why tinted neutrals are generated rather than hand picked: in HCT or OKLCH the whole operation is one number held near zero while hue rides along, and every rung keeps the lightness it was assigned. In hex it is guesswork, and the guesses drift lighter as they get warmer.

A few habits. Tint the surfaces and the lines first, since that is where the halves of a palette meet, and be more careful with ink: text at low chroma is fine, but a tint applied to body copy as well as to its background can leave the two agreeing so closely that the page looks slightly out of focus. Give a dark theme its own tint rather than inverting the light one, because the hue that reads as a warm paper grey reads as a stain at tone 20. And keep one tinted ramp per palette. Two greys, each nearly neutral in a different direction, is the same problem the tint was introduced to solve.

Which word?

If you wantsay
greys that quietly carry the brand huetinted neutral
biasing a palette warm or coolcolor temperature
the greys that most of the interface is actually made ofneutral palette

Sources