When I design things in Adobe Illustrator, I like to pick a colour and then play with its brightness or saturation to make myself a similar colour of the "same family".
In CSS, you can define colours with such kinds of values: RGB, RGBA, HSL... Since you can define all three parameters simultaneously, I've been wondering for a long time: is there a way to change a single parameter of those?
For example, let's say I define three links as having the very "pretty" colours #FF0000, #00FF00 and #0000FF. Would it be possible to create a single CSS rule that would say "on hover of all links, no matter their colour, turn their brightness/lightness down 10%"?
I would very much like to do the same with the alpha parameters of RGBA colours as well. The only such general way I know for affecting all colours indiscriminately is the opacity property, but that turns into a problem if I just want to affect the background.
Such a thing (affecting only H, S, or L) sounds rather straightforward to do: if you can redefine the whole colour, can't you just take the same colour again and change one of its values? But the question is: has someone thought of actually making a way to do that?
You could get a similar effect using rgba values and adjusting the opacity. For example:
color: rgba(0, 0, 0, 1.0);
This represents pure black. The last digits in the parentheses affect the opacity. You could adjust it from 1.0 to 0.5 to get a lighter color (assuming a light background behind the text).
I often do this when I'm too lazy to get specific hex values for shades of gray (but it'll work with any color, too).