Monday, January 9, 2012

CSS: Values: Colors: Short Hexadecimal and Web-Safe Colors

By Richard York

There are 216 web-safe colors. A web-safe color is a hexadecimal color comprised of any combination of the following: FF, CC, 99, 66, 33, 00, for a potential of 216 colors. These colors were originally identified and given their web-safe name by Lynda Weinman, a graphic and web design guru and author of numerous graphic and web design books. These 216 colors were identified as colors safe for cross-platform, cross-browser use on computer systems capable of displaying only 256 colors; in other words, 8-bit systems. There are 216 colors, minus 40 colors reserved for use by operating systems. Different operating systems, such as Macintosh OS and Windows OS, do not reserve the same 40 colors, so these 40 colors cannot be relied upon. If you attempt to use a color outside of the 216-color palette on a system capable of displaying only 256 colors, the operating system may attempt to display the color through a process called dithering. Dithering is a process in which the operating system attempts to mix two colors that it is capable of displaying to get the requested color. While today the majority of computers are comfortably able to display millions of colors, there is still one audience that is using devices that aren’t capable of displaying that many colors, and that is people using cell phones and other small screen devices to access the web.

Figure 2-24 shows a normal image.
Figure 2-25 shows the dithered image.
If you look at these two figures together, you should be able to see the effects of dithering. The image in Figure 2-26 is pixelated and grainy; the image in Figure 2-25 is smooth and fluid.

Dithering causes all sorts of nasty things to happen to an image or solid color. In some cases a grid appears on a solid background where the operating system attempts to display the color using two colors.

Hexadecimal notation is capable of expressing all 16,777,216 colors allowed by RGB. If a color outside the web-safe palette is used, this leads to dithering. Short hexadecimal notation, on the other hand, allows only the 216-color, web-safe palette:

Only FF, CC, 99, 66, 33, and 00 are allowable in the web-safe palette, so the notation for these can be simplified. FF becomes simply F, CC becomes C, 99 becomes 9, and so on. A single digit rather than two represents the pair. So in this example, #000 refers to black and #F00 refers to red. #FFA500 is not representable in short hexadecimal notation because A5 cannot be simplified to a single digit. Only pairs in which both numbers have the same value can be converted to short hexadecimal notation.
Although in the past the web-safe pallet was frequently necessary for designers, today advanced graphic cards capable of displaying millions of colors have become so common that the number of 8-bit systems capable of displaying only 256 colors has fallen dramatically. Today, it is safer to design creatively with color. The browser-safe pallet is not yet completely dead - it still has a place in designing web content for display on PDAs and cell phones, most of which are limited to 256 colors.
Post a Comment