/*
https://jsbin.com/setohiqiwe/edit?html,css,output
*/

:root {
	--color: red;
}

.a, .b, .c {
	margin: 1rem;
	padding: 0.55rem;
}


.a {
	background: hsl(from var(--color) h s 90%);
}

.b {
	background: hsl(from var(--color) h s calc(l + 40));
}

.c {
	background: hsl(from var(--color) h s l / 0.2);
}




/*

Converted to HSL, red is hsl(0 100% 50%), thus:

Setting l to 90%,
Is just hsl(0 100% 90%).

Adding 40 to l,
Add the l components together:
hsl(0 100% (50% + 40%)) → hsl(0 100% 90%)

Changing opacity to 0.2,
This means mixing white (hsl(0 0% 100%)) with hsl(0 100% 50%) on top. I guess you can find some mathematical formula somewhere that resolves this to be hsl(0 100% 90%).

Do the same steps above for green hsl(120deg 100% 25%) and see you get different colors.

*/