Discussion on: Can CSS color variables depend on each other? Help me fight off CSS preprocessors.

[Andrew Bone]

You can do something like this

div {
  --h: 209;
  --s: 28%;
  --l: 30%;
  --a: 1;
}

div:hover {
  --l: 60%;
}

div {
  background: hsl(var(--h), var(--s), var(--l), var(--a));
}

Now when you hover over a div the lightness value will change, alternatively, you could do something like this.

div {
  --h: 209;
  --s: 28%;
  --l: 30%;
  --a: 1;
}

div:hover {
  background: hsl(var(--h), var(--s), calc(var(--l)*2), var(--a));
}

div {
  background: hsl(var(--h), var(--s), var(--l), var(--a));
}

This will achieve the same result but calculates the new lightness meaning you can use classes to have different values.

Here it is in action jsfiddle