Simply put, these are native solutions to colour-related functions that were only present in CSS preprocessors until now.
It lets you generate a colour that's relative to another colour.
To use relative colours, we need to specify the following:
color-function(from origin-color channel1 channel2 channel3 / alpha(optional)) border-color: rgb(from #000 r g b / 0.1);
You can use calc
to modify one of the colour channels, e.g. to add lightness in the hsl
colour space:
background-color: hsl(from #9333ea h s calc(l + 10));
You can use other colour spaces like [[20230508124011-oklch]] to hue shift while maintaining lightness and chroma.
background-color: oklch(from var(--brand-1) l c calc(h + 90));
When using relative colors, the computed color for
hsl()
remains in thesRGB
color space. But for new color spaces likelch()
andoklch()
, the computed color remains in their color space.
Some use cases and common tasks for relative colours:
Something like [[20240926102743-color-mix]] can be used as a fallback, or a slightly different API.
https://ishadeed.com/article/css-relative-colors https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors