- From: Wolfgang Rieger <rieger@bse.de>
- Date: Mon, 22 Apr 1996 18:36:28 +0200
- To: Hakon Lie <howcome@w3.org>
- Cc: www-style@w3.org

On Fri, 2 Feb 1996 11:48:30 +0100, you wrote: >Chris Lilley has brought to attention a color naming scheme that fits >neatly into CSS. CNS is described in [1]. The basic components of CNS >are: > > hues: red, orange, yellow, green, blue, purple, brown, white, gray, black > > saturation: grayish, moderate, strong, vivid (vivid is default) > > lightness: very dark, dark, medium, light, very light (medium is default) > (etc.) In a follow-up Chris Lilley has given some details which make the color scheme and the process of transforming a CNS color spec to RGB appear rather complicated (in my eyes). I was looking for something simple and widely available and found the color selection dialog of MS-Windows. This dialog lets you specify color by giving three quantities named hue, saturation and lightness and a mapping of these colors to RGB. The mapping is not documented but playing around with the settings I found the following mapping implemented: 1.) Hue (H), saturation (S) and lightness (L) are given in the range 0-240. For convenience, let's map hue to the range 0-3.0, saturation to the range 0.0-1.0 and lightness to the range -1.0 - 1.0. So h = H * 3.0/240 s = S / 240.0 l = (L-120)/120.0 2.) From the three RGB values (ranges always 0 - 1.0), lets call the greatest max, the smallest min and the value between those mid. For L = 0.0 we note that min + max = 1.0 max = s + min From this we get max = (1+s) / 2.0 min = (1-s) / 2.0 For mid, we take h modulo 1, min + (h mod 1) * 2 * s for h mod 1 <= 0.5 and mid = max - ((h mod 1) - 0.5) * 2 * s otherwise 3.) Now to assign min, mid and max to RGB we use the following table: Range max mid min 0.0 - 0.5 R G B 0.5 - 1.0 G R B 1.0 - 1.5 G B R 1.5 - 2.0 B G R 2.0 - 2.5 B R G 2.5 - 3.0 R B G 4.) Finally, to account for the lightness value, for each of this colours we set c = C + (1 - C) * l for l >= 0.0 and c = C * (1 + l) for l < 0.0 Example: Hue = 99, Saturation = 190 and Lightness = 168 is mapped to RGB = 118, 239, 175 by the color selector dialog. 1.) h = 99*6/240 = 1.2375 s = 190/240 = 0.7916 l = (168-120)/120 = 0.4 2.) max = (1+0.7916)/2 = 0.8958 min = (1-0.7916)/2 = 0.1042 h mod 1 = 0.2375 < 0.5, therefore mid = 0.1042 + 0.2375 * 2 * 0.7916 = 0.4802 3.) h is in the range 1.0 - 1.5, therefore R = min = 0.1042 G = max = 0.8958 B = mid = 0.4802 4.) Since l >= 0.0 r = R + (1-R) * l = 0.4625 g = G + (1-G) * l = 0.9375 b = B + (1-B) * l = 0.6881 Scaling these values to 0...255 gives 118, 239 and 175 (rounded). This mapping has three advantages: 1. It is really simpler to specify hue, saturation and lightness than to specify RGB values. 2. It is simple to implement. 3. Nearly everybody has a utility to look at and fiddle with colors so specified, namely the MS-Windows color selector dialog. Still one could use this or some other tool for color selection and then put the resulting RGB values into the HTML file. It has one big disadvantage: it is wrong (i.e. it disagrees with nearly everything that we know about the physics of color and vision). It is simple, sloppy and undocumented (translate: made by Microsoft). On the other hand, specifying raw RGB values isn't any better. Comments? Wolfgang Rieger Buero fuer Software-Entwicklung Email: rieger@bse.de WWW : http://www.bse.de/ Rosenheimer Str. 214 Phone: +49 89 497738 81669 Munich, Germany Fax : +49 89 497738

Received on Monday, 22 April 1996 12:34:14 UTC