Color
The use of color is part of what makes the Web so exciting and visually stimulating. As far as computers are concerned, all colors visible to the human eye can be represented in terms of quantities of the primary colors Red, Green, and Blue (RGB). The range of each primary color is 0 to 255. Zero being an absence of that color, 255 being full saturation. Total number of colors possible? Over 16 million.
"Ok", you say, "but the color represenations I've seen look like '6600FF'". How does that relate to ranges of 0 to 255? The answer is that color numbers in HTML are represented in hexadecimal. Basically, a 16 base number system. Zero to nine are represented with the numbers 0 to 9. Ten to fifteen are represented by the letters A thru F. So the number 10 is A, 11 is B, 12 is C, ...15 is F, 255 is FF. Putting it all together: the color red would be represented as "FF0000", green as "00FF00", blue as "0000FF", black which is the absence of all color is "00000", and white which is a combination of all colors is "FFFFFF". Shades in between are a little more difficult to approximate. Fortunately, there are numerous programs and references available to help you find the hexadecimal equivalent of a particular color you might be looking for. I've listed several sites with information in the reference section below.
Ok, so it is possible to represent every color that the human eye can see in terms of it's RGB value. However, not all graphics cards and monitors are created equal. Currently, no color standards exist. What might look like a bright cherry red on one monitor, may look like fire engine red on another. Unfortunately, there's little to be done about that aspect until a color standard is set. But I digress. Graphic cards support different ranges of colors and screen resolution. This is mostly dictated by the amount of memory on a graphics adapter card. Older graphics cards typically only had 512K of memory, enough to display 256 colors at a resolution of up to 640x480. Computers older still, may have been capable of displaying only 16 colors or less.
Today's graphics cards typically have at least 2MB of memory on them and are capable of supporting 16 million colors at resolutions of 640x480, 800x600, and higher. Even though a computer might support 16 million colors, the system may be set to display fewer colors than it is capable of, usually 256. Systems which cannot reproduce the full spectrum (16 million) of possible colors will resort to dithering in an attempt to create the next best match based on mathematics. However, the numbers for color hues don't change in exactly the same way that the computer calculates, and "next-best-match" is often not what was intended. In fact, the "next-best-match" may be a basic color with dots or some other pattern in it. Ik! Because of this, it's wise to stick to the 216 "browser-safe" colors.
Some good points to keep in mind.
- Whenever you set a background image, you should also set a background color that is similar. The background color will appear while the background image is loading.
- If you set a background color, you should also set text, link, visited link, and active link colors. If you don't, the reader may not be able to read the text. Who knows what the reader has his default colors set to. For instance, if the reader's default text color is set to black, and you use a black background color and a starfield background, but don't set the text color, the reader will not be able to see your text.
- To see how your graphics and colors choices look on a computer that only supports 256 colors, set your display to 256 colors, 640x480 resolution.
Browser-Safe Colors
Here's a description of the Browser Safe Palette by Lynda Weinman who figured the whole thing out in the first place:The Browser Safe palette, as I so named it, is the actual palette that Mosaic, Netscape and Internet Explorer use within their browsers. The palettes used by these browsers are slightly different on Macs and PCs. This palette is based on math, not beauty. I didn't and wouldn't have picked the colors in this palette, but Netscape, Mosaic and Internet Explorer did, so...
The Browser Safe Palettes only contain 216 colors out of a possible 256. That is because the remaining 40 colors vary on Macs and PCs. By eliminating the 40 variable colors, this palette is optimized for cross-platform use.
The Browser Safe Palette should not be used to remap color photographs. It is better to use an adaptive palette (with no dithering,if possible) and let the end-browser do any additional dithering. ...The Browser Safe Palette is useful for flat-color illustrations, logos with flat-color, and areas in any image that have a lot of a single color. When a browser dithers flat colors it looks far more objectionable than when it dithers photographs.
- Lynda Weinman
In summary, not all colors will reproduce on a computer that only supports 256 colors and Macintosh computers do strange things with 40 of the colors that work with PCs. Many web publishers feel that all images used on a web page, except for photographs, should be constructed using only "browser-safe colors". There are certainly instances when your intended audience may dictate just that kind of limitation, others find the 216 browser-safe colors too limiting. Whether or not you stick to the 216 browser-safe colors when constructing your graphics, it is a good idea, to limit your background, text, link, visited link, and active link colors to the 216-color safe list. That way your page will be readable no matter what system the reader is using, even if your graphics may not display exactly the way you wished.
For the decimal range 0 to 255, hexadecimal equivalents go from 00 to FF. The "Safe 216" are represented as hexadecimal values for each color, each of which is divisible by three. The resultant six possible "safe" values for each primary color are 00, 33, 66, 99, CC, and FF.
Equivalents: Hex: 00 33 66 99 CC FF Decimal: 0 51 102 153 204 255
The 216 safe colors represent every possible RGB combination of 00, 33, 66, 99, CC, and FF, for example, 000000, 00FFFF, CC3366, etc. That is, there are 6 possible red values times 6 possible green values times 6 possible blue values equals 216 possible RGB safe combinations.
References:
- Named Colors as Defined in HTML and CSS
- By Tina McDuffie
- The Browser-Safe Web Palette: Non-dithering Colors in Browsers
- By Lynda Weinman
- 216 All Browser Safe Colors: Chart and Sampler
- An interactive color chart and selector by Primeline Chemical Systems. Includes: 16 Millon Color Checker & Converter
Copyright © 1997-99 by Tina McDuffie