CSS Relative Color Syntax

[nilaallj]

Description

The relative color syntax makes it possible to manipulate the channel values of any color using any color model.

Examples

:root {
 /* Defining a new color relative to a color defined in a custom property */
 --brand-clr: deeppink;
 --brand-clr-transparent: hsl(from var(--brand-clr) h s l / 0.5);
 --accent-clr: hsl(from var(--brand-clr) calc(h - 180deg) s l);

 /* The syntax also works between different color models and spaces */
 --darker-red: lch(from rgb(255 0 0) calc(l - 20%) c h);
 --pinkish-hue: oklch(from limegreen l c 10deg);
}

Rationale

Color theming is an important aspect of UI design, and being able to define relative colors would make this process much more streamlined and and less repetitive. Many developers already use Sass color functions to preprocess relative colors. There are also libraries such as Color.js which offers similar functionality.

In last year's State of CSS survey, "Functions for manipulating color values" scored high on "Features missing from CSS".

Specification

• CSS Color Module Level 5
  # relative-colors
• CSS Color Module Level 5
  # serial-relative-color

Tests

• 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

[nt1m]

See also w3c/csswg-drafts#7978

[emilio]

This seems more of a new feature rather than interop?

[nilaallj]

@emilio
This is already implemented behind a flag in Safari, and has a W3C specification.

[gsnedders]

This seems more of a new feature rather than interop?

There have been a variety of proposals which are new features, and we didn't exclude new features from being included. (And we did this last year, e.g. Cascade Layers.)

[foolip]

Color functions and related features were a common response to the State of CSS 2022 question about browser incompatibilities, see #248.

About 3% of responses mentioned color functions directly or indirectly, usually as "color function" or "color()", but also things like "display-p3", "LCH color" or "OKLab support".

There were only 6 direct mentions of relative colors, such as "css relative colors (colors math)".

This becomes difficult to untangle since we don't know how many people know that color() as spec'd does include relative colors.

Personally, I see it as a medium-to-strong signal.

[foolip]

In the MDN short survey on CSS & HTML, "CSS color spaces and functions (color(), lab(), gradients, etc.)" was selected by ~25% of survey takers, putting it in the top third of the 20 options. (There is some uncertainty as with any survey data.)

[nairnandu]

Thank you for proposing CSS Relative Color Syntax for inclusion into Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We had many strong proposals, and could not accept them all. However this should not be taken as a comment on the technology as a whole, and resubmitting a proposal for this feature as part of a future round of Interop would be welcome.

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

Posted on behalf of the Interop team.