Netscape's Color Cube revealed

Abstract

The Netscape's color palette or color cube is still a subject of disturbance and discussion among HTML programmers. This tutorial explains all its technical details and offers suggestion on how to convert RGB images to Netscape's color model. The article features an inline image which contains all the 216 colors of that palette, organized in a very practical manner. You can also download a color palette file which can be used with Adobe's Photoshop for correctly mapping RGB images into Netscape's color cube.

Note: this page renders better on Netscape and MSIE 2.0 or above; you can see text colors which are relevant to understanding some explanations.

What do you mean by dull red?

An almost infinite number of colors surround us in our everyday lives. Even so, our knowledge of the real meaning of "colors" is often not precise and insufficient for using them correctly in our design work. Color expression often means ten different perceptions to ten different people. Color is a very difficult topic indeed. A better understanding of color theory, which is very narrowly covered in this article, is a must if we wish to produce higher quality web pages and inline images.

Words that express color change with time. Consider red which has been or is being called vermillion, scarlet and crimson. More recently adjectives were add to this imprecise naming schemes, such as bright, dull and warm. It is quite evident that we need means to verbalize colors without misunderstanding one another. This can be accomplished by understanding color spaces and some color theory concepts. A good FAQs page can be visited here.

Color Spaces

Leaves are green, blood is red and the sun is yellow - at least this is how we perceive colors in everyday language. But color is a phenomenon of physics. As such, it should be possible to describe it mathematically, allowing us to become more accurate with colors naming. As we will see, this is clearly possible.

Actually, what we are expressing so loosely is the result of light illuminating objects and in that process reflecting certain hues. The full light spectrum, as we all know, contains only seven basic colors, namely, red, orange, yellow, green, cyan (a kind of sky blue), blue and magenta (a kind of purple), as seen on figure 1. Orange is not a hue, only the remaining six are.

Figure 1 - the full visible Spectrum of light

But leaves do not look like having the same green tone -- some are lighter, some are darker. This our differentiated perception of colors can be measured independently of color hue and is technically called the value or the lightness of a given color.

Now examine a green plastic bottle and a green leaf. Not only the bottle seems to us darker then the leaf but it also appears to be duller. This our extra perception of color differentiation is its third property which can be measured independently of hue and lightness. It is called chroma or the amount of saturation of a pure color.

Scientists have developed precise methods for measuring those three properties of color and to represent them graphically on color spaces. Color spaces are three-dimensional models which employ three axes to plot hues, lightness and the amount of saturation. One of such models is depicted on figure 2.

On this model, the vertical axis measures lightness, saturation levels are plotted on the horizontal axis and hues are measured around the outer boundary (perimeter).

Figure 2 - a typical Color Space model.

What is Netscape's color cube?

Netscape's color cube is just another color space model. It is different from the one discussed in that it only contains a limited and discrete number of colors. To be exact, it includes 216 different colors. What follows explains the reasons for this constrain.

It derives from the IBM/PC's and Window's bounds. This platform is built around a special arrangement of its graphical hardware, the so called graphics card or graphics adaptor. In the days when Windows was conceived -- as the PC's first graphical interface, graphics cards were expensive and could produce a limited set of colors and low resolution. The fanciest cards of those days were constrained to 640 x 480 pixels and 256 concurrent colors -- the so called VGA graphics board's standard, a configuration which still prevails among microcomputer users.

Windows 2.x and 3.x were designed around that standard. Thus the default graphical driver in Windows and its companion piece of operating software -- the Graphical Device Interface (GDI), can only handle 256 colors. From these, Windows "steals" 20 colors for its internal usage, employed for the configuration of its desktop metaphor and for contrasting the arrow pointer against different shades of color. For this reason, any graphical program can only use 236 colors.

Thus, Netscape had to limit its color scheme to those 236 colors. In addition, this browser "steals" 13 colors for its animated logotype, which results in only 223 colors available to the user. Netscape's programmers further reduced that number to 216 colors. They were forced to come up with a color space which would be easy to handle, having conceived a 6 by 6 by 6 color matrix -- 6 colors for the red component, 6 for green and 6 for blue. This matrix can be visualized as a cube (see figure 3), reason for calling Netscape's color model the color cube

Figure 3 - the two views of Netscape's Color Cube

For simplicity, figure 3 only shows the cube's edges. The cube on the left is plotted along the RGB (red-green-blue) edges. The origin of coordinates is placed at zero -- 00 for red, 00 for green and 00 for blue values, resulting in the black small cube. From there colors irradiate along the three axes. The bottom and central axes show the RGB graduations, whereas the top one depict the transitions to red's and green's complementary colors, namely magenta and yellow. This remains in complete conformity with color theory teachings, something I might explore in another article.

Turning this cube upside down, we can visualize the three complementary colors -- CMY (cyan-magenta-yellow), as seen on figure 3, right. On this view we have placed the main axes starting at white which, as we will see , when coded to its RGB values produce the FF-FF-FF tiny cube. The bottom edges show the transition from cyan to green and blue, again in conformance with color theory.

How to read and code the Netscape Cube?

As the foregoing model can not show all the 216 small cubes which compound it, in figure 4 I have created 6 different slices, which were cut along the blue edge of the RGB view.

Figure 4 - the Netscape's Color Cube sliced along the Blue edge.
Back to figure 5

The main utility of these two-dimensional representations is that you can visualize all the 216 colors available in Netscape's color model. If you learn how to read this color table, you will be able to code any of these colors and employ them for your web page's backgrounds or text colors.

Netscape codes those colors in the hexadecimal numbering system. If you are not familiar with hexadecimal numbering visit this site for a definition and this one for an explanation.

The range for each basic hue (in the RGB color space) goes from 0 to 255 in decimal or from 00 to FF in hexadecimal. As only 6 different numbers can be employed for each of them, they are incremented by multiples of 51 (255 ÷ 5) or 33 in hexadecimal. Figure 4 shows those numbers along the two axes of each square, namely the Red and Green axes. The third axis for Blue is placed at their top. Therefor, if you wish to use any color, just select the three numbers which compose its corresponding numeral string. For example, to obtain pure red, you would code it "FF0000". A turquoise green would be coded "33CC99" and so on.

Lets recollect the way these numbers can be employed in HTML coding Netscape compliant pages:

<BODY BGCOLOR="#CCFF33"> will produce a lemon green background and

<FONT COLOR="#FF3399"> will produce this beautiful vine color text.

Some peculiarities about the Color Cube

[1] Observe the six slices in figure 4. Each one has one special small square which lacks colors at all, and is grayish. You picked them? OK, then you have perceived that their code is always a repetition of the same amounts of their red, green and blue components. This is shown on figure 5.

Figure 5 - the six possible shades of gray in the Netscape Color Cube.

Actually on the two extremes of this picture are white and black, thus not shades of gray, meaning that we are left with only 4 gray tones. We have also uncovered the magic of lightness.

Another issue about gray tones: the code for the standard background gray is "#D9D9D9". In graphical arts this equals 15% spot color black (or 15% cyan, magenta and yellow process mix). As seen, this color doesn't belongs to Netscape's 216 colors palette. The closest match would be "#CCCCCC", which corresponds to 20% black. Now look on figure 6:

Figure 6 - the six possible graduations of green in the Netscape Color Cube.

The leftmost color is pure green. Going from left to right, green tones become darker and duller until we reach the rightmost square which is black again. This is the visual representation of chroma change or saturation removal.

Now we are capable of drawing two important conclusions: by adding lightness we create lighter tones, whereas by adding black we increase dullness and remove saturation.

[2] Look now figure 7:

Figure 7 - light and dark colors contrasting.

How many colors are you capable of distinguishing in the lower 9 squares? Possibly three and, if you have a very young and healthy eye, maybe five or six. How about the upper squares? I bet you that almost anybody can discern nine different tones of greens and yellows. BTW, this picture is exactly the same as the first big square in figure 4 (with blue set to 00), just with some colors removed to demonstrate a color contrasting principle.

What does this principle tell us? That the human eye can better discern lighter colors and has difficulties to perceive tonal variations in darker tones. Do you wish further proof? OK, here is figure 8:

Figure 8 - Do you perceive any difference?

Now answer me the following question: is there any difference between the leftmost 3 columns of colors and the rightmost three? If your answer is "no", well, I suspect you are among those many who are not capable of perceiving them. Actually they are different and correspond to the leftmost three columns in the two first big squares of figure 4 -- the left group is the one with blue=00 and the right one has blue set to 33.

This is just one other way to visually prove the aforementioned principle about our difficulties to discern darker tones. But it also tells us something more, namely that even if Netscape has ingratiated us with 216 colors to pick from, in practice we can only use maybe half of them, specially if it comes to coloring textual strings. For example this text and this text have two different colors, but can you tell the difference?

Last conclusion then: don't get carried away by the quite broad selection of colors Netscape allows us to use. Stick to some basic one, contrast them well, match them to the overall graphical composition of your pages and you will be able to create great looking web pages. I humbly state that the colors selected for this page are a good example of employing a minimal number of them and still getting a quite pleasant visual effect.

How to apply the Netscape color model to your images?

Now comes the tricky part. After learning all this mishmash about colors and Netscape's cube, how do you apply it to the creation of inline images? I will explain the process for Adobe's Photoshop. It is likely that you will be able to reproduce it in many other image editing softwares, provided they can handle lookup tables.

To be able to apply this method to any digital image, it has to be converted from RGB to indexed colors. This is quite straightforward in Photoshop -- you simply click on the Mode menu, select "Indexed Colors" and on the window that opens set Palette to "Custom..." and Dither to "Diffusion", click OK and, well this is where your problems begin ;-) -- Photoshop will present you with the window shown on figure 9, asking you to select a Color Table or Palette.

Figure 9 - Photoshop's Color Table window.

You can not select just any palette, it has to be special one which only contains Netscape's 216 colors. The question is: how to get that color table? Very easily, if you click here for PC/Windows or for Macintosh, downloading that file. All you have to do is decompress that downloaded file and place the decompressed file into the "PALETTE" (PC/Windows) or "Color Palettes" (Macintosh) subdirectory, which you will find inside your main Photoshop directory.

Now that you have this special palette stored, from the window shown in figure 9 click on "Load", select the aforementioned subdirectory and load this file. What you should see on your screen is exactly the colors depicted on figure 9. Click "OK" and you are done. Easy, isn't it?

The last 64,000 dollars question: how did I get this palette in the first place? Creating it by myself. If you examine it carefully you will notice that it contains 36 different blocks of 6 colors each. Photoshop allows to edit any color table and I just made one which is the exact reproduction of the colors you find in figure 4. Oh, by the way, if you wish to "steal" figure 4 and keep it as reference for selecting Netscape colors, be my guest :-)

Nothing else is required since Photoshop is capable of mapping any such palette to any image and finds the correct color substitutions. Of course, during this color translation some are lost and, depending on the quality of your RGB original, posterizing may occur. Posterizing is an undesirable effect which produces grainy looking images. The only way around this problem is to improve your original RGB picture. Figure 1 has been converted by this process and if you examine it carefully you will perceive some posterizing.

What is Dithering?

I got messages from several visitors of this page asking this question. Although dithering is a little beyond the purpose of this article, given the number of requests received, I decided to include an explanation.

Keep in mind the explanations given about the 256 colors limitation mentioned previously. Since the tonal transition between each of the eight possible combinations of the RGB components is not continuous, if you would try to create a graduated strip banding would occur. This is the effect that makes a graduation look as if it was made up of strips of tones, like the one shown on the left side of figure 10.

Figure 10 - banding and dithering in practice

Since banding results in an unpleasant look, engineers devised a scheme that minimizes it. It is a visual trick that causes the human eye to believe there is little or not perceivable banding. Look at the right side of figure 10. Observe this image closely. You will notice that along the borders of each tonal transition there are odd combinations of the two adjascent colors. This is how the so-called dithering effect works: by combining two close tones and changing the density of each one along the strip -- increasing one and decreasing the other, dithering can create an almost acceptable graduated strip. When dithering is applied to photographs it improves them, diminishing the so-called posterizing effect which is the equivalent to banding in non-continous tonal transitions, such as which happen in photographs.

Author's short biography

Tom Venetianer was born in Czechoslovakia and now lives in São Paulo, Brazil. He graduated as an electronic engineer and carries a MBA degree in Marketing. Currently Tom is senior partner with MVA Consultores Associados, a firm specialized in Internet marketing and presence providing. Previously he worked as a senior executive for several large American and European organizations. His over 30 years experience spans into sales and marketing of consumer goods, advertising, computers, computer graphics and desktop publishing. He speaks fluently eight languages. Tom is Webmaster of the Webling's Café site.

click here to return to the Webling's site

Webmaster: Tom Venetianer mvassist at embratel.net.br

All content protected by copyright © 1996, 1997 All rights 
reserved to MVA Consultores Associados Rua Dr. Gabriel dos Santos, 564 - cj. 
22 ¤ 01231-010 São Paulo ¤ Telefax: (55-11) 862-4730 
* 
 
Webling is a trademark under registration 
by MVA Consultores Associados

Revised in: December 26, 1996
Electronic address of this page - http://mvassist.pair.com/Articles/NS2colors.html