Re: CIE color definitions in CSS3 color module

A year ago, Alexis Shaw has proposed to include definitions for the
CIE color spaces in CSS3.

From: Alexis Shaw <alexis.shaw@gmail.com>
Date: Sat, 11 Sep 2010 00:29:21 +1000
Subject: CIE color definitions in CSS3 color module

I have read the tread and wish to make some comments and give some thoughts..

State of the art
****************
Browsers like Mozilla Firefox or Safari (WebKit) are color managed.
This means, that if you are embedding an ICC color profile in a
picture, the browser will transform the color information to the
monitors ICC target. If no ICC profile is embedded in the picture, the
browser assumes sRGB. If you shoot Photos in Pro Photo RGB or Adobe
RGB and delete the profile in an converting stage, without to
transform first to the sRGB profile, then the photo is not shown
correctly in the browsers. This often is the cause, because most
people don't know, or don't care what color management is. But every
professional web designer and photographer should care about colors.

Since Level 2.1, CSS defines the sRGB color space for all RGB values.
So every browser should be color managed by now. But most browsers
simply giving the RGB values direct to the monitor, without color
management. This is absolutely incorrect and not acceptable.

Room for improvements
*********************
These days we have monitor technologies like LCD, Plasmas, OLED, CRTs
and many more. There are LCDs on the market, that not use one R,G,B
sub pixel to mix the color for each pixel, like they have done in the
days of CRTs, they have arrangements like G,R,B,W (some Sony monitors)
or G,G,R,B etc. They try to get closer to the visual range of an human
eye, which reception was standardized with the CIE-L*a*b color space.
In the future it could be and I hope for it, that monitor and graphic
card vendors switch to CIE-XYZ for color transmission over cables from
graphic card to monitors, because with RGB it is simply not possible
to loss less transmit color information in a mathematical correct way.

At the moment graphic cards like the ATI FireGL V7350 graphics card
supporting up to 64bit colors, far beyond the 24bit used as the
standard color depth today, but they are still limited by the additive
color mixing of the RGB schema.

The EIZO <a href="http://www.eizo.com/global/products/coloredge/cg245w/index.html">ColorEdge
CG245W</a> par example, can display 98% of the Adobe RGB color space,
which is much bigger than sRGB. Even a cheap monitor today can display
more than sRGB.

You see, that we should make some room for technical improvements. If
all web browsers would be totally color managed (pictures and CSS
colors) and it would be possible to define colors beyond the very
limited sRGB space, then the market has a new selling argument for
monitors, which are supporting much more vivid colors. Everyone gains.

What should be changed
**********************
To define colors beyond sRGB we need an additional ways to define
colors. Someone might think that CSS should implement CIE-XYZ but I
personally think that would be a bad idea, becouse CIE-XYZ was
specified to mathematically describe almost every possible color, but
it does not match the human eye, it is bigger. It is ideally to store
color information in pictures or transmit colors over cables, but not
for general usable color definition. So are CIE xyY, xyz, CIE-LUV.

Because of this problematic, CIE has developed the CIE-L*a*b color
space. It represent the human eye. It is a wonderful thing, but it is
difficult to define colors with Lab values. So they have made a very
simple transformation called CIE-L*C*h.

The transformation from CIE-L*C*h to CIE-L*a*b:

L = L
a = C * cos(h)
b = C * sin(h)

and back:

L = L
C = sqrt(a^2+b^2)
h = arctan(b/a)

It has the same advantages as the CSS Level 3 hsl colors. If you want
it darker, lower L, if you want to add more chroma, increase C. You
get the idea. It is a cylindrical representation of the color
reception of the human eye.

h has a range from 0° to 360°
L from 0 - 100 (in practice from 0-96, because absolute white is not possible)
C from 0 - 100 (in practice from 0 to around 90)

Because it was modelled after the human eye, you can also create some
amazing stuff in color palette creation, without complicated
calculations.

Example 1:
All colors are specified with L*,C*,h

Palette of monochromatic colors:
Start color:  80,20,210
color 1:  80,15,210
color 2:  80,10,210
color 3:  80, 5,210

I have started by defining the start color. Now I want a monochromatic
row with a total of 4 colors. I have defined a chroma step of 5. So
you can simply sub 5 from the C* value.

C* color 1: 20-1*5
C* color 2: 20-2*5
C* color 3: 20-3*5

Very easy, do that with RGB

Example 2:
Darken color

Start color:  80,20,210
color 1: 60,20,210
color 2: 40,20,210
color 4: 30,20,210

By reducing the L* value each time with 20, I receive a perfect row in
which each color is exact the same amount darker than the previous.

Example 3:
Complement color

Start color: 80,20,210

The h ranges from 0-360 degree. Because I want the color on the other
side of the cylinder (wheel), I have to subtract 180 degree from h.

h = 210-180 = 30

Complement color: 80,20,30

Example 4:
Gradient in 3 steps

Start color:  80,20,240
End color:  40,40,160

Guess what? The result is:

Start color:  80,20,240
color 1: 70,25,220 
color 2: 60,30,200
color 3: 50,35,180
End color:  40,40,160

It is a simple interpolation between each corresponding start and end value..

This system is so easy to use, that a famous German color company
called "RAL Farben" has published color cards for CIE-L*C*h called
"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. So RAL 240 80
20 is CIE-L*C*h 80,20,240. This system is a lot easier to use as the
RAL Clasic(TM), Pantone(TM) or other systems.

The RAL System uses the CIE 1931, 2° observer and the D65 illuminant.

It is very important to define an observer and an standard illuminant.
Alexis Shawn has proposed in his orginal email, that there should be a
way to specify the illuminant of the CIE value, but I don't know if
this would be not to much. I think it would be better to stick to a
default observer and illuminant value.

Coming to an end, I would propose the following additions, changes for
the CSS Level 4 color module.

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

Kevin

Received on Wednesday, 9 November 2011 08:30:21 UTC