Mixing colors without a preprocessor
Blending two colors used to require Sass, Less, or a JS utility. color-mix() does it in plain CSS, and it supports perceptually uniform color spaces like oklch.
2$blue: #3b82f6;
3$pink: #ec4899;
4
5$blend: mix($blue, $pink, 60%);
6
7.card {
8 background: $blend;
9}
10// Compiles at build time. Static.
2 background: color-mix(
3 in oklch, #3b82f6 60%, #ec4899
4 );
5}
6/* Dynamic. No build step. */
Perceptually uniform
Mix in oklch for results that look natural to the human eye, unlike Sass's sRGB mixing.
Dynamic at runtime
Change the mix with custom properties, no recompilation. Works with themes, dark mode, anything.
No build step
Drop Sass, PostCSS, or any preprocessor for color manipulation. Native CSS does it now.
How it works
color-mix(in oklch, color1 percentage, color2) blends two colors in the specified color space. The percentage controls how much of the first color to use.
The oklch color space is perceptually uniform, meaning a 50/50 mix of blue and yellow actually looks like a midpoint, unlike sRGB mixing which often produces muddy results. You can also use srgb, hsl, lab, or lch.
The best part: combine it with custom properties for dynamic theming. color-mix(in oklch, var(--brand) 80%, white) gives you a lighter variant of any brand color, at runtime, no build step.