Tom Venetianer's Color Primer
For the past few months, I had planned to write something similar to this, that would let folks know exactly how to figure out the hexadecimal color code used in Netscape's specifications works. I picked it up fairly quickly, but it was a struggle even for me, for a while.
In the meantime a fellow member of the HTML Writer's Guild wrote a short message that does an adequate job of explaining it (thus keeping me from having to do it).
From: Tom Venetianer <mvassist@embratel.net.br>
OK folks, since this subject keeps popping up like mushrooms, here goes my first tentative to clarify the mysteries of colors and graphics.
Digital color is created on the monitor's screen by combining three elementary colors: Red, Green and Blue dots. Color on printed media (paper, fabric etc.) is produced by combinations of three elementary colors and Black, namely Cyan (kind of sky blue), Magenta (kind of pink), Yellow and Black.
On a color wheel, Red, Green and Blue are complementary colors to Yellow, Cyan and Magenta. Thus, it shouldn't come as a surprise that on a digital devices Red and Green produce Yellow, Green and Blue produce Cyan and Blue and Red produce Magenta. In elementary school we were thought to think a little bit differently, namely that Red and Blue mixed produce Pink, Red and Yellow produce Orange and Yellow and Blue produce Green. Although these mixtures are correct, they do not correspond to the normal cycling of the color wheel. Actually they are combinations one gets when mixing colors on some media. More on this later.
Brown, Rose, Pink, Royal, Turquoise etc. are not colors in the strict technical sense. These are either tints of an elementary color or their unsaturated version. Since this sounds Mesopotamian to most of who read this, let me explain.The color spectra has only seven pure colors or hues: Red, Orange, Yellow, Green, Cyan, Blue and Purple. So if Mother Nature can only produce these seven, Man was forced to invent something to extend the range of pseudo-colors our eye is capable of seeing. Therefor, mixing White to any of these colors we get Tints*(light Red = Rose, light Blue = Sky Blue, light Green = Grass etc.). Mixing Black to them we get Unsaturated Hues (dark Red = Brown, dark Blue = Royal etc.)
White is not a hue but the addition of maximal Lightness (sometimes called erroneously Brightness) to any hue. Black is also not a hue but the total absence of Saturation.
Now my final master touch to all this confusion: Digital colors are additive and printed colors are subtractive. Red and Green produce Yellow (on digital devices) because these devices emit color and the human eye adds them. Yellow and Magenta produce the sensation of Red (when printed) because the human eye is looking to a reflection of the printed image and the light source only reflects Red, subtracting all other colors. As the saying goes, inside a darkroom all cats are Grey! (Sure thing, there is no color to reflect).
Browsers rely on the user's monitor, right? So graphical screens, such as the Web pages rendered by a specific browser, can only reproduce what the monitor can. On the other hand, monitors can only reproduce what the computer's hardware sends to them. The hardware of interest is the graphics card or graphics board or graphics circuitry (Wow!).
The first graphics boards for the PC - the so called CGA standard - had only three colors: Cyan, Magenta and Yellow (what a surprise!). Of course White and Black were also available because they are, as we have seen, total Lightness or the absance of Saturation. So we happily looked at pinkish faces, bluish bodies and yellowish suns. Resolution was also very low - 320 horizontal by 200 vertical pixels which resulted in *very jaggy* graphics.
This had a big advantage though. The machine could be made of cheap components, mainly memory, which by then cost *fortunes*. Memory was needed (still is) to store the color and resolution information. But with the above you could make a graphics board with roughly 16K of graphics memory (I am not going now to explain these mathematics, but might on a later issue of this fantastic white paper).
So we were disapointed and started screaming for more color and more resolution. And the Industry respondend with EGAs, VGAs, SuperVGAs and HyperSuperDuperVGAs. As memory got cheaper it produced the 640 x 350 boards (EGAs) - 16 colors, the 640 x 480 (VGA) - 256 colors, the 800 x 600 - 32,000 colors (SuperVGA) and more recently the 1024 x 748 - 16 million colors (PGA I think?) boards.
[Start of rambling]
If you think this is marvelous and the limit, forget it: A pixel on photo
films and printed paper can have a resolution of 3 to 8 thousands dots
per inch. So be prepared for the SEXY (Super EXtremelY) High Resolution
Graphics Boards.
[End of rambling]
Today's accepted standard is VGA (640 x 480, 256 colors). Almost all micros in use have a monitor and graphics board that can produce these values. Resolution is quite easy to understand (so many dots per horizontal by that many vertical) but the number of colors needs some further explanations, which, as you are now sick to know, will follow.
If we use 8 different tints of Red, Green and Blue, we can generate 8 x 8 x 8 = 256 different colors/tints AND White and Black. But we can not produce unsaturated colors. Thus it's not possible to have Pure Greys and certain other colors such as Gold, Rust, Bronze etc. For that we need more subtle combinations and more tints. It follows that with 256 levels of Red, Green, Blue AND the full control of Saturation and Lightness we can produce 16,777,216 different colors, including the specials mentioned before.
Again, if this sounds spectacular, it's not: The human eye has the capability to discern about three times as many variations. What limits the digital devices is discernability, an ugly world I will skip explaining. Enough it is, to say that neither monitors, nor scanners (or for that matter printing presses) can reproduce the full spectra of colors the human eye can perceive. But I digress again...
Computers count in hexadecimal numbers. It beats me why, but who cares
anyway? Nevertheless, with one small byte you can store the number 256 (or
FF in hexadecimal). For those who are not familiar with hex counting, 0 is
zero, 1 is one (keep reading...) 2 is two... BUT A is ten,
B is eleven and
We have seen that the 256 x 256 x 256 colors produce over 16 million variations. Let's apply this to putting colors on our Netscape enhanced pages or texts.
Coded in hexadecimal, 00 for Red, 00 for Green and 00 for Blue will produce what? Black of course! Then FF for Red, FF for Green and FF for Blue must necessarily result in White. This leaves us only 16,777,216 other color variations to explain, but don't worry, it's easy.
This one should be now very easy. Making the hex number of each elementary color to vary and keeping the other two zeroed, you get tints of practically every imaginable color:
220000 is a very dark Red, whereas 880000 is somewhat lighther (about 50% of Red) and FF0000 is Pure Red. You can do the same to Green and Blue, and of course, to their combinations:
The hex numbers do not have to be well behaved. In other words any crazy combination is allowed, like 4AC003 which produces... I don't know what, just look on the screen!
Be warned though: if you are planning to design for 256 colors only, you must reduce your combinations to the allowed 256 colors. I don't have it by heart but Netscape has a table of those colors hexa codes. They are always multiples of 3. The reason for this will be given in an other edition of this paper if I survive all the flames it will receive...