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.
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.
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
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.|
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
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.
Figure 4 - the Netscape's Color Cube sliced along the Blue edge.
Back to figure 5
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.
Figure 5 - the six possible shades of gray in the Netscape Color Cube.
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.
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. Look now figure 7:
Figure 7 - light and dark colors contrasting.
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?
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.
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.
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.
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
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 AssociadosRevised in: December 26, 1996