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 background: color-mix(
3 in oklch, #3b82f6 60%, #ec4899
4 );
5}
6/* Dynamic. No build step. */
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.
color-mix() Browser Support
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
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.