Relative color allows to modify existing colors using color functions.

For instance, in the following snippet, we keep the color as it is but we change the opacity to 80%:

:root {
  --bg-color: blue;
}

.overlay {
  background: rgb(from var(--bg-color) r g b / 80%);
}

It’s possible to use math functions to modify the color channels. In the next example, the origin color is darkened by cutting its lightness by half. Notice that even if the origin color is a keyword (which makes it an sRGB color), it gets interpreted as an HSL color because we’re using the lch() function.

:root {
  --color: green;
}

.foo {
  --darker-accent: lch(from var(--color) calc(l / 2) c h);
}