color-mix(in oklch, var(--brand) 60%, white) produces a colour halfway between two colours in a perceptual space. It replaces a wall of design-token shades with one expression.
Combine it with custom properties to build automatic shade scales: --brand-100 through --brand-900 can all derive from a single --brand token.
Supported across Chrome, Firefox, and Safari. Use the OKLCH or LAB colour space rather than sRGB to avoid muddy midtones.