W3C home > Mailing lists > Public > www-style@w3.org > November 2011

Re: [css4-color] HLC <= CIE-La*b*

From: Kevin Bortis <kevin@bortis.ch>
Date: Mon, 21 Nov 2011 15:06:23 +0100
Message-ID: <CALONj1e3YJYp3v-Cwbg0V8EH0NgkZFB-RfsjXuiUe-jBFVi8NA@mail.gmail.com>
To: W3C Style <www-style@w3.org>
On Tue, Nov 15, 2011 at 3:56 PM, Christoph Päper
<christoph.paeper@crissov.de> wrote:
> Kevin Bortis:
...
>
>> The transformation from CIE-L*C*h to CIE-L*a*b:
>> L = L
>> a = C * cos(h)
>> b = C * sin(h)
>>
>> L = L
>> C = sqrt(a^2+b^2)
>> h = arctan(b/a)
>>
>> "RAL Design(TM)". The values printed on the cards are in the format
>> HLC which is a lot easier to use in practice than LCh.
>
> HLC seems fine enough. It is reminiscent of HSL, though, therefore some authors will assume simple conversions like
>
>  hsl(a, b, c) ⇒ hlc(a, c, d)
>
>> em { color: hlc(240, 80, 15) }        /* light blue */
>
> That’s repeating the mistake from HSL in CSS3.

I don't understand why this would be a mistake?

>
>  hlc(<angle>, <percentage>, <percentage>)
>
>  hlc(240deg, 80%, 15%)
>  hlc(0.667turn, 0.8, 0.15)
>  hlc(267grad, 204, 38) …

Degrees are the only practical solution here. I don't know anyone who
is using turns for color angles. The only other solution would be rad,
but this is not practical because PI is a never ending floating point
number.

I also don't like the percentage value. The reason is, that someone
has to define the 100%. At the moment, the limit on lightness is
around 92, but could be improved in the next years. I think that
percentage values are great for color correction command like "darken
this color 20%", but are not very useful in color definition. The same
problem would be at the chroma value, there is theoretically no limit
in this number.

>
>> To extend the color pallete from the current sRGB color space. A new CIE-L*C*h color pallette should be created
>
> Maybe, but a user-friendly verbose systematic one, not reusing the stupid X11 names and values.
>
>> em { color: rgb(aliceblue) }
>> em { color: aliceblue 1 }    /* aliceblue = #F0F8FF, alpha 1 */
>
> That’s unnecessary and not backwards compatible.

Most browsers are ignoring the "1". The inclusion of rgb() and rgba()
in the current CSS spec is a mistake in my eyes. First you define a
color and then tell the browser to add transparency to it. Defining
two function for every possible color definition is not a very good
solution ( rgb(), rgba(), hsl(), hsla()....).

Why should it be impossible to add the possibility for such color
definitions as: { color: aliceblue 0.5 } in the level 4 color module?

>
>> Because every color can have an alpha channel, the alpha channel should be seperated from the color itself.
>
> That makes no sense. Authors now have learned that they need to add an ‘a’ to the color system pseudo function name if they want to specify a translucent color.

In history, someone had to learn that the world is not flat, that air
has a weight, that metrical units are more useful for use in
physics... Seriously, if someone make a living from web development,
he or her is quickly learning how to define colors in an alternative
way.

>
>  hlca(<angle>, <percentage>, <percentage>, <percentage>)
>

Here is my proposal for the CSS Level 4 color module, copied from
http://lists.w3.org/Archives/Public/www-style/2011Nov/0194.html.

CIE Colors
*************
Observer: CIE 1931, 2° or CIE 1964, 10°
Illuminant: D50 (used by ICC profiles) / D65 (almost by everyone else)

General color format
************************
Each color is defined by a color value and optional the alpha channel:

em { color: value alpha }       /* alpha range from 0 to 1 */

RGB color values
********************

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

HSL color values
********************

em { color: hsl(0, 100%, 50%) }   /* red */
em { color: hsl(120, 100%, 50%) } /* lime */
em { color: hsl(120, 100%, 25%) } /* dark green */
em { color: hsl(120, 100%, 75%) } /* light green */
em { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */

CIE-L*C*h values as HLC
*****************************

em { color: hlc(240, 80, 15) }  /* light blue */
em { color: hlc(240, 80, 10) }  /* light blue with lower chroma */
em { color: hlc(240, 80, 5) }           /* light blue with even lower chroma */
em { color: hlc(240, 20, 15) }  /* dark steel blue */
em { color: hlc(60, 80, 15) }           /* complement of light blue */

Color names
***************
A color value can also be represented by a Color names. To extend the
color pallete from the current sRGB color space. A new CIE-L*C*h color
pallette should be created

The RGB/HSL color pallette (limited to sRGB)
=================================

ex. aliceblue = rgb(240,248,255)

em { color: aliceblue }
em { color: rgb(aliceblue) }
em { color: hsl(aliceblue) }

The hlc color pallette (limited only by CIE-L*a*b)
===================================

ex. light_blue = hlc(240, 80, 15)

em { color: hlc(light_blue) }


The alpha channel
*********************
Because every color can have an alpha channel, the alpha channel
should be seperated from the color itself.

em { color: #f00 1 }                           /* #rgb alpha 1 = 100% */
em { color: hsl(0, 100%, 50%) 0.3 }     /* red, alpha 0.3 */
em { color: hlc(240, 80, 15) 0 }           /* light blue, alpha 0 = 0% */
em { color: aliceblue 1 }                     /* aliceblue = #F0F8FF, alpha 1 */
em { color: hlc(light_blue) 0.2 }           /* hlc(240, 80, 15), alpha 0.2 */

CSS3 compatibility (only for RGB and HSL values)

em { color: rgba(240, 248, 255, 1) }
em { color: hsla(0, 100%, 50%, 0.3) }


I know that the work on CSS4 has already started for some parts. So I
would be happy, if you could consider the proposed changes for next
generation CSS.

Regards
Received on Monday, 21 November 2011 14:07:16 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:46 GMT