The address for this web page is: http://fishcaro.crosswinds.net/day_27_web_safe_colors.htm
On to the next lesson! Back to the COURSE SYLLABUS

27. WEB-SAFE COLORS

Although the RGB color system uses 24 bits and therefore specifies 2²⁴ = 16,777,216 different colors, the cruel fact is that only a small percentage of computers in the world (very expensive ones) are equipped to display 24-bit color. Many support only 8-bit color; these can display only 2⁸ = 256 colors at any one time. Others support only 16-bit color. In both cases, adjustments often need to be made. Different adjustments are made by different systems and different browsers with different kinds of techniques. It's VERY HARD to predict results for a wide variety of situations.

So, what's a web designer to do? Today's lesson offers one possible solution to this problem...

INDEX CARD #27:

COLOR PALETTES (27a)

What is a "palette"? Here's Webster's definition: a palette (pronounced PAL-it) is the range of colors used in a given painting or by a given artist.
What is a "system palette"? For system-level operations, computers use a specific set of 256 colors, called the system palette. MACs and PCs use slightly different sets, but there are 216 colors that are shared by both system palettes.
What is the "web palette"? The web palette consists of the 216 colors that are shared by the MAC and PC system palettes. These 216 colors will render correctly on both MAC and PC displays. (However, these colors may shift or dither on UNIX terminals.) The "web palette" is also known as the Netscape Palette, Netscape 216, Browser-Safe Palette, Web-Safe Palette, Non-dithering Palette, and the 6×6×6 cube. (This last name should make more sense momentarily.)
What is "color shifting"? Non-web-safe-colors specified in an HTML document are usually replaced by the nearest available Web Palette color; this effect is called color shifting. Do you see different colors below? If not, then color shifting has taken place! This is slateblue, #6A5ACD. This is the nearest web-safe color to slateblue, #6666CC.

COLOR NUMBERS for the WEB PALETTE (27b)

Is it easy to recognize which colors are in the WEB PALETTE, from their hexadecimal codes? YES! Each web palette color has a hexadecimal code of the form RRGGBB, where RR, GG, and BB can only take on the following six values:

00 or 33 or 66 or 99 or CC or FF

Thus, there are 6 choices for RR; there are 6 choices for GG; and there are 6 choices for BB. Together, there are 6×6×6 = 216 web-safe colors. This is why the web-safe colors are sometimes referred to as the 6×6×6 cube.

For example, #33FF00 is a web-safe color, but #33FF01 isn't.

What are the advantages to using only web-safe colors when designing graphics and HTML pages? You'll know exactly what your page will look like (color-wise, at least) to all your viewers. (Well... different users may have set their preferences to use different link colors, or different text colors ...)

Printable version of Index Card 27a

Printable version of Index Card 27b

WORKSHEET #27:

(W27.1) The Web Palette is displayed on the web pages for the Weasel Book; click on "Web Palette" in the left-hand margin: http://www.oreilly.com/catalog/wdnut/
(W27.2) Visit the "Paletteman" site again, and figure out if only web-safe colors are being used: http://www.paletteman.com/ Determine a color scheme for your homepage that you're pleased with. (You can choose up to four colors, and a color for text.) In the next few lessons, you'll learn how to set background and text colors and more.

ASSIGNMENT #27:

(A27.1) Please read pages 30–33 (from "Color in Browsers (The Web Palette)" up to "Web authoring tools") in the Weasel Book.
(A27.2) Go to Table 5-2 (Color Names with their Numeric Values) in the Weasel Book, on pages 79–82. MARK the colors that are in the Web Palette. (These are the colors for which the hexadecimal code and the nearest web-safe color are the same). There are only ten named colors that are web-safe!