Can I change a single parameter of a colour in CSS?

Question

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?

Answer 1

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).

Answer 2

I suggest looking into SASS and LESS, which can accomplish this for you and much, much more.

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

Or you can use jQuery to accomplish this, as answered in this question:

Increase CSS brightness color on click with jquery/javascript?