color-mix()
The color-mix() function blends two colors in a given color space by a specified ratio.
Syntax
color-mix(in <space>, <c1> <p1>, <c2> <p2>)Examples
.btn { background: var(--brand); }
.btn:hover {
background: color-mix(in oklch, var(--brand), black 12%);
}
.tint { background: color-mix(in srgb, royalblue 20%, white); }
Output
Darkens the brand color by 12% on hover and creates a light blue tint, derived dynamically from one token.
Notes
Mixing in oklch keeps perceived lightness uniform, ideal for hover/active states from a single design token. Percentages are normalized if they do not sum to 100%. Baseline since 2023.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 111 |
| firefox | 113 |
| safari | 16.2 |
| edge | 111 |