Relative Color Syntax

[Jothsa]

Description

CSS Relative colors syntax allows colors to be created from an origin color. The new color can use the color channels of the origin color as is, manipulate them with math functions, or replace them with another value. The CSS Relative color syntax lets developers easily create variants of colors

Specification

https://www.w3.org/TR/css-color-5/#relative-colors

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-color?label=master&label=experimental&aligned&q=relative
https://wpt.fyi/results/css/css-color/parsing?label=master&label=experimental&aligned&q=relative

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

https://bugs.chromium.org/p/chromium/issues/detail?id=1475009&q=Relative%20Color%20syntax&can=2

https://bugzilla.mozilla.org/show_bug.cgi?id=1701488

Developer discussions

https://stackoverflow.com/questions/55329996/how-to-create-color-shades-using-css-variables-similar-to-darken-of-sass
https://stackoverflow.com/a/71098929
https://chriscoyier.net/2023/01/26/relative-color-syntax-plzzzzz/
https://stackoverflow.com/questions/52037809/add-alpha-channel-to-hex-color-declared-on-css-variable

Polls & Surveys

In the State of CSS 2023 survey, over 1000 developers added relative colors to their reading list. https://2023.stateofcss.com/en-US/features/#reading_list

Existing Usage

No response

Workarounds

https://preset-env.cssdb.org/blog/postcss-relative-color-syntax/

Accessibility Impact

This would make designing accessible color palettes much easier, especially when used with a perceptually linear color space such as oklch. It becomes much easier to create higher contrast variants of colors.

For example:

button {
    background-color: var(—secondary);

    &:hover, &:focus-visible {
        background-color: oklch(from var(—secondary), calc( l + .3) c h);
}

In this example, a hover variant is created of a color, ensuring that the new color is 30% lighter than the old color.

Privacy Impact

No response

Other

No response

[lukewarlow]

Chrome Intent to Ship: https://chromestatus.com/feature/5205844613922816
Looks like it'll be shipped in 119.

Firefox Standards Position: mozilla/standards-positions#841

[svgeesus]

current WPT results for RCS

[emilio]

@tiaanl mentioned that WPTs expect gamut mapping at computed value time, is that right @svgeesus? I thought gamut mapping should only happen at used value time?

[emilio]

Untangling RCS from gamut mapping would be nice in terms of supporting this proposal fwiw.

[tiaanl]

@emilio it was my mistake. Exactly the opposite is true. They should NOT be gamut mapped. Sorry for the confusion. Looking at the gamut mapping interop proposal the tests for gamut mapping refers to the RCS test for not gamut mapping.

[svgeesus]

@tiaanl mentioned that WPTs expect gamut mapping at computed value time, is that right @svgeesus?

No

I thought gamut mapping should only happen at used value time?

Correct.

[wpt-interop]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.

[zcorpan]

Thank you for proposing Relative Color Syntax for inclusion in Interop 2024.

We are pleased to let you know that this proposal was accepted as part of the Relative Color Syntax focus area. You can follow the progress of this focus area on the Interop 2024 dashboard.

For an overview of our process, see the proposal selection. Thank you for contributing to Interop 2024!

Posted on behalf of the Interop team.