- From: Kevin Bortis <kevin@bortis.ch>
- Date: Tue, 8 Nov 2011 14:43:49 +0100
- To: www-style@w3.org
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