Relative colors with the relative color syntax

One color function I do use regularly, and I am excited to tell you about because I use it all the time, is the relative color syntax. This lets you amend a color by kind of deconstructing it. Consider swatch 13 in our example file, which is set with this CSS:

.relative {
    --bg: #f90;
    background-color: hsl(from var(--bg) h s calc(l + 10));
}

Admittedly, that can look quite daunting. Let’s break it down. So, here we have a custom property set to a hex value (#f90). Then, with our hsl() color function notation, we use the from keyword to “pick” where we are generating our relative color from. In this case, it is the hex defined as a custom property in the preceding line, but it could be any color set in any of the notations that CSS allows. Then, we can use the letters of the color type – in this case, h, s, and l – to get the component parts of the original color into our current format...