This is a post I’m mostly writing for my future self, because I can never remember the actual term for the CSS feature that lets you define a color based on another color (it’s “CSS Relative Color”) and “color mix” which is what I keep wanting the feature to be called never turns up any results but is an actual CSS function.
The feature here is that you can take a color you already have and manipulate its components. Which things you can change vary by the color space you choose, so for an RGB color you can change the red, green, blue, and alpha channels, for an HSL color you can change hue, saturation, lightness, and alpha, and for my beloved OKLCH you can change lightness, chroma, hue, and yes, opacity.
The syntax if you wanted to use this and not change anything about the color is:
oklch(from var(--color) l c h / 1)
But of course you can change each component, either swapping them entirely as with this which sets the lightness to 20%:
oklch(from var(--color) 20% c h / 1)
Or, more usefully, with a nested calc to change a component with some 𝐦𝐚𝐭𝐡, used here to find the inverse of a color while maintaining the perceived brightness and saturation:
hsl(from var(--color) h s calc(l * 0.2))
The fun thing in these examples is that var(--color) 1. doesn’t need to be a variable, it can be any color definition and 2. can be any color definition, not necessarily one that matches the colorspace you want to do your manipulation in.
This is a really useful feature, but I have to look up the syntax almost every time I use it. Hopefully now I’ll have an easier time finding it.
