color-mix()

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.

Baseline Status: Achieved Widely Available on Nov 9, 2025 (Cross-browser Newly Available since May 9, 2023).

Desktop Browser Engine Support

Google Chrome

111

Supported

Mozilla Firefox

113

Supported

Apple Safari

16.2

Supported

Microsoft Edge

111

Supported

Mobile Browser Engine Support

Chrome Android

111

Firefox Android

113

Safari iOS

16.2

Specifications and References

Specification ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.types.color.color-mix ↗