W3C home > Mailing lists > Public > www-style@w3.org > February 2014

Re: CSS3 lighten/darken suggestion

From: Chris Lilley <chris@w3.org>
Date: Wed, 26 Feb 2014 18:57:52 +0100
Message-ID: <947472645.20140226185752@w3.org>
To: Jon Rimmer <jon.rimmer@gmail.com>
CC: Simon Sapin <simon.sapin@exyr.org>, www-style list <www-style@w3.org>
Hello Jon,

Monday, February 24, 2014, 7:21:37 PM, you wrote:

> My knowledge of colour theory is pretty weak, but as I understand it,
> a problem with transforming colours in RGB/HSL etc. is that
> equal-sized changes do not have perceptually uniform results
> throughout the colour space[1].

Correct.

> Is there scope to allow transformations that are done in the Lab
> colour space[2]?

Lab isn't (totally) perceptually uniform either (but it is way better than
HSL). To improve on Lab you need to either go for a multidimensional
colour-appearance space, or alternatively use a more complex distance
metric than straight Pythagoream distance (delta-E 2000 is an example
of such a metric).
http://www.brucelindbloom.com/index.html?Eqn_DeltaE_CIE2000.html
http://www.colorwiki.com/wiki/Delta_E:_The_Color_Difference

A further problem with modifying in Lab is that you easily get out of
gamut colours, which then need to be mapped back into the gamut, which
then means that your computed sets of colours are no longer
perceptually evenly spaced again. So overall, its a good goal but non
trivial. Thus, an Lab-based algorithm should not be the only one.

For CSS Color 4 its probably sufficient to make manipulations in HSL,
provided this does not preclude any later, additional methods.

> [1] http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/
> [2] http://en.wikipedia.org/wiki/Lab_color_space


> On 24 February 2014 16:22, Simon Sapin <simon.sapin@exyr.org> wrote:
>> On 24/02/2014 16:13, Dub wrote:
>>>
>>> Hello,
>>>
>>> I am wondering if this has ever been brought up before now that we have
>>> calc and such in the mix what are peoples thoughts on perhaps RGB/HEX
>>> functions such as
>>>
>>> lighten(#000000, 20%);
>>>
>>> darken(#ffffff, 30%);
>>>
>>> Thoughts?
>>
>>
>> Hi,
>>
>> We have a proposal for this in CSS Color 4:
>>
>> http://dev.w3.org/csswg/css-color-4/#modifying-colors
>> http://dev.w3.org/csswg/css-color-4/#tint-shade-adjusters
>>
>> The syntax for your examples would be:
>>
>>   color(#000000 tint(20%))
>>   color(#ffffff shade(30%))
>>
>> Feel free to send feedback on this here.
>>
>> --
>> Simon Sapin
>>




-- 
Best regards,
 Chris                            mailto:chris@w3.org
Received on Wednesday, 26 February 2014 17:57:55 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 26 February 2014 17:57:56 UTC