Intent to prototype: Relative Color Syntax

[Tiaan Louw]

Summary: The relative color syntax was introduced in the css-color-5 specification.  It helps users adjust colors programmatically without resorting to other features like color-mix(). It is currently part of the interop 2024 effort.

An example of a lighter, darker and complimentary accent color:

lch(from var(--accent-color) max(l * 1.2, 1.0) c h)
lch(from var(--accent-color) calc(l * 0.5) c h)
lch(from var(--accent-color) l c calc(h + 180))

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=interop-2024-relative-color-syntax

Specification: https://drafts.csswg.org/css-color-5/#relative-colors

Platform coverage: All

Preference: layout.css.relative-color-syntax.enabled (default off)

DevTools bug: ?

Link to standards-positions discussion: https://mozilla.github.io/standards-positions/#css-relative-color-syntax

Other browsers:

• Blink: Shipped in 16.4.
  
• WebKit: Shipped in 119.
  

web-platform-tests: https://wpt.fyi/results/css/css-color?label=experimental&label=master&aligned&view=interop&q=label%3Ainterop-2024-relative-color

--

Tiaan Louw

Senior Software Engineer | Berlin

Slack: tlouw

[Sebastian Zartner]

I've created a DevTools bug for this feature at https://bugzilla.mozilla.org/show_bug.cgi?id=1889296.

Sebastian

--
You received this message because you are subscribed to the Google Groups "dev-pl...@mozilla.org" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dev-platform...@mozilla.org.
To view this discussion on the web visit https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/CAOozUgdeP8vHm3CDo_zVXS0gczgcz_H7BjmBMeCd86rW_v6%2BfA%40mail.gmail.com.