CSS Color Module Level 4 and color-mix()

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 111)
Intent stage: None

Breaking change: No
Enterprise impact: None
Chromium flag: enable-experimental-web-platform-features
Spec maturity: Published standard
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-color?label=experimental&label=master&aligned All features are well tested by WPT and the results are being used for interop.

Summary

All features described in CSS Color 4 (https://www.w3.org/TR/css-color-4/) are now enabled! This includes four device-independent color types (lab, Oklab, lch and Oklch), the color() function and user-defined color spaces for gradients and animations. The incredibly useful color-mix() function from CSS Color 5 (https://www.w3.org/TR/css-color-5/#color-mix) has also been included as a bonus!

Motivation

In order to fully take advantage of HD color displays, allow for more robust photo editing, to improve tools for web authors and to finally rid the world of ugly, dark gradients many new features have been added to the CSS Color specification. It's high time we implemented them in Chromium.

Standards & signals

Specification: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
Firefox: Shipped/Shipping — https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox
Safari: Shipped/Shipping
Web developers: Strongly positive — Several partners (Adobe, for example) have expressed interest in the new color API.

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-color
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20Color%20Module%20Level%204%20and%20color-mix()
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20Color%20Module%20Level%204%20and%20color-mix()
Baseline status: https://webstatus.dev/?q=CSS%20Color%20Module%20Level%204%20and%20color-mix()

Samples: https://codepen.io/argyleink/pen/RwyOyeq https://2021-hd-color-at-css-camp.netlify.app/

View on chromestatus.com