W3C home > Mailing lists > Public > www-style@w3.org > September 2008

Re: Color Lightening and Darkening

From: Mikko Rantalainen <mikko.rantalainen@peda.net>
Date: Mon, 01 Sep 2008 13:36:12 +0300
Message-ID: <48BBC59C.2000002@peda.net>
To: www-style@w3.org
Garrett Smith wrote:
> On Thu, Aug 28, 2008 at 9:51 AM, Daniel Glazman
> <daniel.glazman@disruptive-innovations.com> wrote:
>> Dave Artz wrote:
>>>
>>> this lighter/bolder discussion gave me a thought
>>>
>>> how about a way for designers to easily modify the color or
>>> background-color property lighter or darker?
>>>
>>> sort of like this http://www.barelyfitz.com/projects/csscolor/
> 
> Using a server script makes it harder to maintain the stylesheet and
> adds more complexity for setting headers.
> 
>>> could be nice for quickly dealing with different states of links or
>>> changing a base color hue and having the design quickly re-skin based on
>>> relative shading
> 
> So it sounds like you want to have a base Hue, base Brightness, then
> change the base Brightness separately.
> 
> What advantage does this provide over HSL colors?

I think the adventage is ability to use relative colors. A stylesheet
could say that a list (ol) inside a list has always a bit darker
background than its parent. One could emulate this by setting the color
in the root element and then using black background for all the list
elements with alpha set to small value (so that background would be a
mix of original color and black - for most users that would be "darker").

I think that ability to have relative colors if no use unless you can
guarantee some contrast between foreground and background colors. I'd
suggest that if relative colors are introduced, then an another property
"min-foreground-background-absolute-difference" (a shorter name would be
nice) should be added, too. The behavior for that property would be to
specify minimum value for function

	abs(r1-r2) + abs(g1-g2) + abs(b1-b2)

where abs() returns absolute value and r1 is red color component value
for background and g2 is green color component value for foreground
value in range 0-1. If the required minimum difference is not met, then
the UA should adjust the foreground color towards white (if foreground
color is 50% or lighter) or black (if foreground color is darker than
50% grey).

Of cource, the function could be a bit smarter (weighted average
according to human sensitivity to different wavelengths).

To adjust the foreground color towards white or black, the UA should
just render the color with alpha+black or alpha+white until the desired
minimum value has been met.

-- 
Mikko


Received on Monday, 1 September 2008 10:36:58 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:12 GMT