0

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?

Ariane
  • 393
  • 4
  • 14
  • CSS cannot do it natively, but SASS and some other CSS pre-processors can. http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#lighten-instance_method – Explosion Pills Apr 22 '13 at 04:39
  • ^Why is this not an answer? It seems more adequate and more concise than anything below. – Ariane Apr 22 '13 at 05:19

2 Answers2

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?

Community
  • 1
  • 1
Michael Rader
  • 5,839
  • 8
  • 33
  • 43
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).

Mark Ryan Sallee
  • 293
  • 1
  • 9
  • But if I do "color: #FF0000;" and then later, I do "color: rgba(0,0,0,0.5);" I don't get light red, do I? I get grey. And if I use "opacity: 0.5;" then the background colour or image will also become transparent. – Ariane Apr 22 '13 at 05:18
  • You're correct. To do what I'm suggesting, you'd start with `color: rgba(255, 0, 0, 1.0);` -- your later styles, for :hover or whatever, would then be `color: rgba(255, 0, 0, 0.5);` etc. – Mark Ryan Sallee Apr 22 '13 at 05:20
  • That's not what I'm looking for. I'm looking for something that can affect both a green and a red element, and render both of them darker. – Ariane Apr 22 '13 at 06:36
  • I think I gotcha. Maybe not quite what you're looking for, but CSS filters may work. Try un-commenting some of the lines in this fiddle. http://jsfiddle.net/MRSallee/zTtEd/1/ – Mark Ryan Sallee Apr 22 '13 at 07:30
  • This is somewhat it, even though you can't point to strictly background-color or color with it. Sounds pretty useful. Though not exactly vastly supported for now~. Funny how CSS filters are Chrome only and SVG filters are Firefox only. – Ariane Apr 22 '13 at 07:53