Quintessential Software, LLC
Introduction
On most computers, color is represented by a composite of Red,
Green, and Blue pixels. You can
think of this as being three dimensions of color. On a PC, each color is represented by
a value from 0 to 255 (0 to FF in hex), where 0 means "no color", and 255 represents
"100% color". For example, a Red pixel would be 255 red,
0 green, 0 blue; or FF0000.
All the colors you see on the screen are combinations of these three. For example,
combining all three to the maximum possible (FFFFFF) results in the color WHITE. Absence
of all three colors (000000) results in BLACK. Any time all three dimensions are
equal (000000, 808080, FFFFFF, etc), you get a point along the grey-scale continuum from
black to white.
The Map
Each color dimension contains 256 (0 through 255) possible values. With three dimensions,
that's a total of 256 x 256 x 256, or 16,777,216 possible combinations. Creating a web page
with that many combinations would be many megabytes in size, and impossible to load in most
browsers. So, for the map below, only every 4th combination is shown. For example, each
dimension goes 0, 3, 7, 11, etc. That's still 262,144 colors!
There are really three charts shown below. The left "cube" shows the colors that are
computed using subtractive combinations - going toward zero as you move to the center of
the cube. One of the three dimensions is always zero. The right-hand cube shows additive
combinations - going toward 255 (FF) as you move toward the center. One of the three
dimensions on this cube is always FF (255). The bottom band shows grey-scale combinations
(where all three dimensions are always equal).
Each box in the map is 3x3 pixels in size. Hover your mouse cursor over any spot on the
color map to see its corresponding color reference number (in the rrggbb hexadecimal
notation described above).
Please be patient... the colors take a little time to load. After all, this page is 926K!
The Math
The math is not really hard, once you figure out how to map 3 dimensions into 2-dimensional
space. Here are the equations used to generate the cubes in the map. The axies run from the
center of each cube out to the red, green, or blue corner. The intervening corners represent
combinations of 2 colors: red + green, for example, equals yellow.
x = grn - ((red + blu)/2)
y = ((red - blu)/2) x sqrt(3)
One other tip: I did not generate the HTML by hand! I wrote a small C++ program
to create this entire page. MUCH easier....