Editors note since this document was written in 2001 many network
users in the United States have moved beyond the limitations of this color model
with new hardware. The restrictions imposed by this model are still very
much valid, especially in developing countries where older computers are
prevalent.
What
you are looking at above is a three-dimensional view of the Netscape Color Cube.
If you move the mouse over the image the direction of rotation will
change. The cube
measures 6 x 6 x 6 for a total color space of 216 different colors.
These are often referred to as the "Web-safe" colors. Why 216
colors? When the color cube was developed computer video hardware
commonly used images where each pixel (a point on the screen) was saved as
an index into a color palette containing 256 entries:
The video hardware uses the index value in the data corresponding to each
screen pixel to select the actual color displayed.
The operating system needs some of these colors, so the
color model used by the browsers only allocates 216 entries from that palette. You can click on any
side of the cube above to expand the 36 colors that are displayed there
(36 colors x 6 sides = 216 colors).
How Computers Display Color. A computer monitor displays all colors by combing
different values of the colors red, green, and blue. This is called
the RGB color system, which is and additive color system used in
technology which projects light. Reflective systems, which are
actually subtractive because certain wavelengths of light are absorbed by
an object and others bounce off, use a cyan, magenta, yellow and black
scheme (CMYK) that we won't go into here. HTML works and most other applications use
red, green, and blue values in the range from 0 to 255 (256 possible
shades). Combining three of these values allows for
16,777,216 different colors and that is generally considered by the
scientific community to be more than the average
human eye can differentiate1. Some
monitors, scanners, and graphics programs
sport much higher color resolutions. This is wasted on a video
adapter, but not wasted data
because during image manipulation the computer can use the
higher resolution to produce sharper results in the range we can see.
Specifying Color Values. There are generally four levels of
support for color in computer systems: 4bit (16 colors), 8bit (256
colors), 16bit (65,536 colors), 24bit (16,777,216 colors), and 32bit (4,294,967,296 colors). A
specific color value can be specified to 24 and 32bit systems.
Internally in the system 4, 8, and 16bit color are specified as indexes
into a palette of predetermined colors, but In HTML the true color is
always specified, and then the client browser will determine how to use
that.
We normally work with numbers in base 10 (decimal), but in HTML numbers are
specified in base 16 (hexadecimal). This is more important than
ever, because the current standards have eliminated the assigned names
that many pages use (the assigned names only map to the Web-safe colors). Base sixteen uses a value from 0
to 15 in every digit, and we represent the last six digits using the
letters A through F:
Decimal
Hexadecimal
HTML uses two hex digits for red, green, and blue, for a total of six
digits for any color value. Converting a two digit hex value to
decimal isn't that bad; translate the first digit to decimal and multiple
by sixteen, and then translate the second digit and add that: 33 hex -> 3
* 16 + 3 = 51 decimal. Going the other way is the opposite, you need to
divide the decimal number by 16 to get the first digit, and use the
remainder for the second digit: 51 decimal -> 51/16 = 3, remainder 3.
The Design of the Color Cube. The eight corners of the cube contain these specific values:
FF FF FF
FF FF 00
00 FF FF
00 FF 00
FF 00 00
FF 00 FF
00 00 FF
00 00 00
Since there are six color elements across in any direction on the cube and
the values of R, G, or B range from 0 to 255 (FF in hexadecimal), then even steps would be
256/6 = 51 (33 in hexadecimal).
Each square across the cube changes one or more red, green, and blue values by this
increment. This does not always offer the most pleasing shades of
transition between two colors, but it is easy to program and manipulate
and that counts for something.
The values of the web safe colors then are all the possible combinations of 0, 33, 66,
99, CC, or FF.
The Color Cube Palette.
This is the full palette of all 216 different colors. Move the mouse
over each color to find its RGB value:
How the Color Cube Fits.
Actually the color cube does not fit anything except the 256 color model
very well. If the computer supports 4bit color, then the color is
going to appear very poor. We discount 4bit color because a
new video adapter costs about two months of Internet service, so anyone
who can purchase service should be able to get one. The 16bit color
system uses a palette that unfortunately does not include all of the Web
safe color palette. Quite simply, the Web-safe palette was invented
before 16bit color was popular, but the designers of 16bit color did not
take it into account. There are more 16bit than 8bit systems out
there, but hopefully for not too much longer. 16bit systems are more
adept at approximating the color using the dithering techniques described
next.
Matching Colors and Dithering.
If the computer uses a palette to display color, then colors in the page
background (solid or image) are displayed by searching for the
closest possible match to a solid color that can be achieved.
Colors in other images that appear on the page are simulated using
a technique called "dithering", where the unavailable color is simulated
by placing pixels of adjacent colors together in close proximity.
For example, the color #4053A5 does not map to the color cube. A
browser that cannot show this will dither using color cube colors to
approximate it:
Dithering takes longer to calculate and paint, and that is why it isn't done for the background.
Many graphics applications allow a picture to be dithered against a
specific palette and saved, but we discourage that. The reality is that when editing a photograph or picture it is better to present it with the
highest number of true colors, and let the client's browser handle the dithering.
Then clients with higher quality video adapters and no palettes will be able to see it in
its true form.
Is there more? Yes there is!
Your image will probably not appear exactly the same on two monitors
placed side by side. This is because most monitors are not
calibrated to produce true color. Calibration is a technique that is
used to align both video and print output devices to the
Pantone color system,
the color system generally accepted in the commercial print world.
Professional designers use this so that what they see on the screen is
what they'll see when printing. But most of the world simply uses a
monitor as it came out of the box from a vendor.
Conclusions: Don't rely heavily on color, especially
logos that "must" be shown to be the exact Pantone color. For safety
in showing solid color, pick colors from the Web-safe palette because they
will show exactly on an 8bit system, and on a 24bit or above system.
Certain colors may appear dithered on some 16bit systems, but hopefully
they will be in the minority.
1
We have not been able to find a conclusive study of the
number of shades of color that the eye can differentiate. Estimates
are based on the known anatomy of the eye, and range from the tens of
thousands to hundreds of millions. The most professional reference
we could find comes from an online text at the Medical School of the University of Western Ontario
(no longer available),
which states that the human eye can distinguish 500 levels of brightness,
20 levels of saturation, and 200 different hues, for a total of 2,000,000
gradations of color. Adobe (the makers of the most popular graphic
program PhotoShop) provides a slightly lower estimate.
