Web platform features explorer - color-mix()

Web platform features explorer

Tags: css Groups: CSS

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.

Learn more

color-mix()

Specifications

CSS Color Module Level 5 (#color-mix), from Cascading Style Sheets (CSS) Working Group (W3C).

Browser support

Chrome 111 Released on 2023-03-07
Chrome Android 111 Released on 2023-03-07
Edge 111 Released on 2023-03-13
Firefox 113 Released on 2023-05-09
Firefox for Android 113 Released on 2023-05-09
Safari 16.2 Released on 2022-12-13
Safari on iOS 16.2 Released on 2022-12-13

Developer signals

State of CSS 2025: features/all_features question
State of CSS 2024: usage/favorite_new_features question
State of CSS 2024: usage/css_interoperability_features question
State of CSS 2024: features/all_features question

Usage (according to Chrome Platform Status)

~3.874% of page loads. More data at chromestatus.

Interop

Included in Interop 2022
Included in Interop 2023

Web Platform Tests (WPT)

View the latest WPT test results for this feature

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist