color-mix()
Blends two colors together in a given color space. Pass two colors and a percentage, and the browser returns the mix. Use it to tint, shade, or fade any color at runtime, no preprocessor needed.
Quick example
.element {
/* Mix brand color 60% with white for a tint */
background: color-mix(in oklch, var(--color-brand) 60%, white);
}color-mix() Browser Support
Widely available Since 2023 93% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
111+
113+
16.2+
111+