One of the attractions of the World Wide Web is the preponderance of color! Newer monitors and graphics cards have the ability to display millions of colors. Today's web sites bask in color!
Unfortunately, not all browsers generate colors the same way. To further complicate things, not all computer systems (PCs, Macs, and Unix) generate colors the same way. It's even worse than that, because not all monitors display colors the same way. Colors that look bright on one browser may look dim on another browser. Brilliant colors on one monitor are an ugly gray on another monitor.
There are techniques that you can use to increase the likelihood that the colors on your web site will look almost the same on most browsers (unfortunately, you can't do much to help out with the monitor problem, unless you want to limit your site to 16 colors). Let's see what can be done.
Use "Safe" Colors
Out of the millions of colors that modern monitors can display, there are only 216 colors that are generated almost the same way by browsers on Macs and PCs. These colors are referred to as "safe" colors. If you use these safe colors, you will have a higher chance that your colors will look about the same on different browsers. This is important if your computer has an older graphics card or an older browser. If you have a modern computer that can display millions of colors, you don't have to be concerned with safe colors.
There are a number of web sites that display the safe colors. The site that I use is The Browser Safe Color Palette by Lynda Weinman. Lynda's page gives a nice but brief tutorial about the safe colors, and it gives small samples of all the safe colors. Be aware, however, that modern graphics cards display millions of colors, and the use of safe colors is not as important as it used to be.
Primary Colors
Even though monitors can display millions of colors, there are only three primary colors; the rest of the colors are combinations of the primary colors. In grade school, we were taught that the primary colors are red, yellow, and blue. Those are the primary colors for paint (reflective light) but not for monitor screens (incident light). The primary colors for monitor screens are red, green, and blue. These colors are often referred to as RGB. Web sites giving color palettes give the amount of each primary color that is needed to provide particular shades.
Sometimes the proportions of RGB are given as decimal numbers from 0 to 255. Other times, the proportions are given as hexadecimal numbers from 0 to FF. Lynda gives the proportions in both number systems. She gives the hexadecimal values as one hexadecimal number such as, for example, FF33CC (red is FF, green is 33, and blue is CC). She gives the decimal values as three decimal numbers that have R:, G:, or B: as prefixes.
Hexadecimal Numbers
Hexadecimal, or hex, numbers seem strange at first because they contain alphabet letters as well as numbers. The number system we are familiar with is the decimal system that contains the digits 0 through 9; this number system is based on the number 10, that is, there are 10 digits. Hexadecimal numbers are based on the number 16 and have 16 "digits". Since we only have 10 numbers in our language, we use alphabet letters for the remaining 6 hexadecimal digits. The following table gives the correlation between decimal and hexadecimal digits.
Value | Decimal | Hex
|
| 0 | 0 | 0
|
| 1 | 1 | 1
|
| 2 | 2 | 2
|
| 3 | 3 | 3
|
| 4 | 4 | 4
|
| 5 | 5 | 5
|
| 6 | 6 | 6
|
| 7 | 7 | 7
|
| 8 | 8 | 8
|
| 9 | 9 | 9
|
| 10 | -- | A
|
| 11 | -- | B
|
| 12 | -- | C
|
| 13 | -- | D
|
| 14 | -- | E
|
| 15 | -- | F
|
Dithering
If your web site contains colors that are not part of the 216-color palette of the browsers, the browsers will attempt to obtain your colors by mixing the primary colors. Unfortunately, electronic colors do not mix homogeneously as do paint colors. Electronic colors are composed of small dots, called pixels, and when they are mixed, the pixels remain their original color--our eyes blend the dots into a resulting color. Depending on the colors involved, our eyes may not blend the pixels very well, and the resulting colors look spotted. This blending of colors is known as "dithering". By restricting your colors to the safe colors, you eliminate dithering.
The effects of dithering are dependent upon the number of colors that are being displayed by your monitor. The more colors displayed, the better job of dithering. The bad news is that browsers need more time to display your pages, although newer video cards are faster and make up the time-difference.
Your Decision
Unfortunately, as a web designer, you don't know how many colors visitors to your site will be using, nor do you know what computer systems and what browsers they will be using. Many people now have newer computers that reproduce millions of tints and shades, and the use of "safe" colors is not as important as it once was. Some people, however, surf the web with old computer systems that can't display more than 256 colors. You will have to decide if you want to restrict your use of colors to the safe colors, or not worry about the people with older systems and give your site more colors.
Further Reading
To delve deeper into colors in web design, study the Aestestics and Links pages.
[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Color Compatibility ] [ Font Compatibility ] [ Graphics Compatibility ] [ XHTML Validation ] [ Screen Resolution ]
© Copyright 1998, 2011 Allen Leigh