CSS Relative Color Syntax (RCS)

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

Breaking change: No
Enterprise impact: None
Chromium flag: Experimental Web Platform features
Spec maturity: Published standard
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-color/parsing/color-computed-relative-color.html https://wpt.fyi/results/css/css-color/parsing/color-invalid-relative-color.html https://wpt.fyi/results/css/css-color/parsing/color-valid-relative-color.html

Summary

The relative color syntax allows developers to define colors by modifying the parameters of other colors. For example: oklab(from magenta calc(l * 0.8) a b); Will result in an oklab magenta that is 80% as light. https://www.w3.org/TR/css-color-5/#relative-colors

Standards & signals

Specification: https://www.w3.org/TR/css-color-5/#relative-colors
Firefox: No signal
Safari: Shipped/Shipping
Web developers: No signals
Tracking bug: https://crbug.com/1475009

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-color%2Fparsing%2Fcolor-computed-relative-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%20Relative%20Color%20Syntax%20(RCS)
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20Relative%20Color%20Syntax%20(RCS)
Baseline status: https://webstatus.dev/?q=CSS%20Relative%20Color%20Syntax%20(RCS)

View on chromestatus.com