coderef

color-mix()Baseline · Widely available

The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since May 9, 2023. Widely available since Nov 9, 2025.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Edge
12–110Not supported
111+Supportedsince Mar 13, 2023
Current: 154
Firefox
1–112Not supported
113+Supportedsince May 9, 2023
Current: 157
Safari
1–16.1Not supported
16.2+Supportedsince Dec 13, 2022
Current: 27
MobileChrome Android
18–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Firefox Android
4–112Not supported
113+Supportedsince May 9, 2023
Current: 157
Safari iOS
1–16.1Not supported
16.2+Supportedsince Dec 13, 2022
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS
.button:hover {
  /* 20% darker version of the brand color */
  background: color-mix(in oklab, var(--brand), black 20%);
}

.badge {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
}

Feature detection

CSS · check before using
@supports (color: color-mix(in srgb, red, blue)) {
  /* styles that use color-mix */
}

/* or in JavaScript */
if (CSS.supports("color", "color-mix(in srgb, red, blue)")) {
  // use it
}

Documentation (MDN)

Specification