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

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