Relative Color

Define a color relative to another one.

color-function(from origin-color channel1 channel2 channel3 / alpha(optional))

Examples:

Lightness

Absolute value:

:root {
    --color-1: hsl(336, 100%, 50%);
    /* Absolute value */
    --color-1-lighter: hsl(from var(--color-1) h s 75%);
    /* Or relative to the current color value */
    --color-1-darker: hsl(from var(--color-1) h s calc(l - 25));
}

Transparency

:root {
    --color-2: cyan;
    --color-2-translucide: rgb(from var(--color-2) r g b / 50%);
}

Complementary

:root {
    --color-3: yellow;
    --color-3-complementary: rgb(from var(--color-3) calc(255 - r) calc(255 - g) calc(255 - b));
}