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