[Prev][Next][Index][Thread]
Re: CNS colors
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
Follow-Ups:
References: