Desaturate a Color by Mixing with Gray
Reduce a color's chroma without changing its hue family. Mix with a neutral gray in oklch to produce muted, professional palette variants.
Detailed Explanation
Building Muted Variants
Sometimes you do not want a darker or lighter shade — you want a muted version that retains the same hue but reads as quieter or more sophisticated:
:root {
--brand: #2563eb;
--neutral: #71717a; /* zinc-500, roughly L 0.55 */
}
.muted-30 { background: color-mix(in oklch, var(--brand), var(--neutral) 30%); }
.muted-60 { background: color-mix(in oklch, var(--brand), var(--neutral) 60%); }
Mixing with a perceptually-mid neutral (around L 0.55) preserves the overall lightness of the result and pulls the chroma down. The hue family stays recognizably "blue" but the visual loudness drops.
Why not just lower saturation?
CSS does not have a stand-alone "saturation knob" for arbitrary colors.
Pre-color-mix, the closest you could do was convert to HSL, lower the
S value, and convert back — three lossy round-trips. color-mix() does
all of that in a single CSS line and lets you stay in OKLCH.
Picking the gray
The lightness of your neutral matters. If your neutral is much darker
than the brand, the result also darkens. If it matches the brand's L,
the result purely desaturates. A quick way to find a matching gray is to
use the color converter to read the OKLCH L of
your brand, then construct oklch(L 0 0).
Use Case
Use for secondary buttons, low-emphasis chips, disabled controls, and 'subtle' badges where the full brand chroma would feel too loud.