Putting Colors in Order Article

This article was published in Dr. Dobb's Journal #202 July 1993, page 40, with listings on page 96.

                             PUTTING COLORS IN ORDER

                   A new method of looking at RGB color space
                            as Hue, Value and Chroma

                                 Harry J. Smith

In any software/hardware interface to a color display there is a way to specify the different colors that can be displayed. If the number of colors is more than just a few, say 65, 256, 256K, etc., there becomes a confusion as to how to specify the colors in an orderly sequence of color hue, brightness and color saturation. Normally there is a simple way of converting the color specification into a relative intensity of each of the three phosphor colors refereed to as R-red, G-green and B-blue. This article shows a way to convert this R,G,B specification of a color into a H-hue, V-value, C-chroma specification so that the colors can be ordered by dominant frequency (H-hue), luminance (V-value) and amount of color (C-chroma).

There are several systems for the specification of colors. For example 1) The 1931 Commission Internationale l'Eclairage (CIE) standard observer. 2) The Munsell System, Munsell Book of Colors. 3) The Optical Society of America Uniform Color Scale. 4) CIE Uniform Color Space. These and other systems are well documented in the literature. A good reference is "Color and the Computer" edited by H. John Durrett, Academic Press. This book has 16 individual articles on its subject, all with extensive references to other articles.

The method proposed to convert R,G,B to H,V,C is based on my new paradigm which is a geometric model for looking at a color specification. The model is a two dimensional graph, see figure 1. Any color is represented on this graph as three points equally spaced around the circumference of a circle with their vertical coordinates between 0.0 and 1.0. The vertical coordinates of these three points are considered to be the relative intensity of the three phosphor colors R-red, G-green and B-blue. The vertical coordinate of the center of the circle is considered to be the V- value parameter of the color. The angle that the radius from the center to the G-green point makes with a vertical base line is considered to be the H-hue of the color. The radius of the circle is considered to be the C-chroma of the color.

Given an R,G,B triplet or vector it is not easy to know how to plot them so that they lie on a circle, but equations for this will be developed here. First we start with an H,V,C triplet and derive equations for computing R,G,B and then find the inverse of this transformation. Looking at figure 1 we see that the angle from the vertical base to R is H + 120 degrees, to G is H and to B is H - 120 degrees, so it is easy to see that

             R = V - C cos(H + 120 degrees)
             G = V - C cos(H)
             B = V - C cos(H - 120 degrees)

This set of equations can be solved for H,V,C and the solution is

             H = atan2(R - B, (sqrt(3) / 3)(R - 2G + B))
             V = (R + G + B) / 3
             C = (R - 2G + B) / (3 cos(H)
        or   C = (R - B) / (sqrt(3) sin(H)),

where atan2 is the arc-tangent function of two arguments y, x which is equal to the arc-tangent of y / x but resolves the result to be in the proper quadrant. This set of equations can be simplified for computations if V is computed first as

             V = (R + G + B) / 3
             H = atan2(R - B, sqrt(3)(V - G))
             C = (V - G) / cos(H)  if |cos(H)| > 0.2
             C = (R - B) / (sqrt(3) sin(H))  if |cos(H)| <= 0.2.

If we look at figure 1, we can think of a color as a bubble floating in two dimensional space. If the bubble rotates through 360 degrees without changing its position or size it will travel through all colors hues without changing its amount of luminance or amount of color. If it is rises without rotating or changing its size it will be the same color hue and have the same amount of color but will have more white and be brighter. If it expands in size without rotating and keeps its center fixed it will be the same color hue and the same luminance but will have more color and less grayness.

The EGA standard for the IBM PCs and compatibles define 64 colors, any 16 of which can be mapped to the usable palette at any given time. If you display these 64 colors in numerical order, 16 at a time, you get a hodgepodge of colors in no logical order. The 64 EGA color numbers are assigned in a way that the numbers can easily be converted to a relative intensity of each of the three phosphor colors R,G,B. If the number is converted to six bit binary, the most significant three bits represent the 25% level of R,G,B in that order and the least significant three bits represent the 75% level of R,G,B in that order. Take EGA color 53 for example. In binary, 53 is 110101. Since both R bits are on, R = 1.0. Of the G bits only the 25% bit is on so G = 0.25. Of the B bits only the 75% bit is on so B = 0.75. For this color

             V = (1.0 + 0.25 + 0.75) / 3 = 0.6667
             H = atan2(0.25, sqrt(3)(0.4167)) = 19.1066 degrees
             C = 0.4167 / cos(19.1066 degrees) = 0.4410

This color can now be plotted on our two dimensional bubble graph and we can see the essence of the color and compare it to any other color we might choose to plot.

The IBM VGA 256K color mode allows a number from 0 to 63 to be used to specify the relative intensity of each of the three phosphor colors R-red, G-green and B-blue. These numbers, call them Rv, Gv, Bv, can be divided by their max value 63 to produce the R,G,V vector needed for the transformation to H,V,C. If we wanted to produce a continuous spectrum of color hues at maximum value and maximum chroma, we can easily do this if we keep our mind focused on the two dimensional color bubble. We start at H = 0 with Bv = 63, Rv = 63 and Gv = 0. Then as the bubble rotates, keeping it at maximum size, Rv and Gv will not change but Bv will decrease by one for each producible color until Bv = 0. Then Rv and Bv will not change but Gv will increase by one for each producible color until Gv = 63. This process will continue until Gv = 0 and Rv = 63 which is where we started.

Once this new way of looking at color as a two dimensional bubble floating above a horizontal line, rotating, rising, falling, expanding and contracting is mastered, it becomes relatively easy to travel through color space in an orderly manner.

Turbo Pascal 5.0 listings are included with this article. Listing 1 is a procedure for converting R,G,B to H,V,C. Listing 2 is a procedure for converting H,V,C to R,G,B. Listing 3 is a procedure for converting EGA color numbers (0-63) to R,G,B.

        -----------------------------The End-----------------------------

        Harry is a Division Principal Engineer, Software, specializing in 
        satellite telemetry data processing.  He can be reached at Litton 
        Computer Services 1300 Villa Street,  Mountain View,  CA 94039 or 
        at his home 19628 Via Monte Drive, Saratoga, CA 95070.

Return to Putting Colors in Order
Return to Harry's Home Page

This page accessed times since October 20, 2004.
Page created by: hjsmithh@sbcglobal.net
Changes last made on Saturday, 14-May-05 12:44:05 PDT