Web Color Reference - HTML with Style | 4
Web Color Reference
The Websafe and Reallysafe Palettes
The "Websafe" palette is a bit controversial. It is a set of 216 colors that are, supposedly, guaranteed to appear as intended on all graphical displays when used in HTML, CSS, and images embedded in Web pages. Many Web developers believe that sticking to these colors is one of the holiest commandments in the Web design scripture.
This was mostly a concern when most computers had 8-bit color displays; these days, most people run at 16-bit or 24-bit color. Although these bit-depths render the Websafe palette pointless, dithering and quantization bugs in browsers and operating systems still cause problems in 16-bit displays (16-bit display, also known as "High Color" mode or "Thousands of Colors," is generally problematic). Extensive testing has led to a new palette, called "Reallysafe," whose colors are guaranteed to appear correctly on all displays and all browsers. As the Reallysafe creators say, I hope you like green.
If you use different colors than these, you might see images and backgrounds of the same color appear at a slightly different tint, so that a "box" will be visible around them if the background extends beyond the image's edges. And remember, only use cue-tips to clean your outer ear. Right.
WebSafe Palette | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Code | Color | Code | Color | Code | Color | Code | Color | Code | Color | Code | Color |
000000 | 000033 | 000066 | 000099 | 0000cc | 0000FF | ||||||
003300 | 003333 | 003366 | 003399 | 0033cc | 0033ff | ||||||
006600 | 006633 | 006666 | 006699 | 0066cc | 0066ff | ||||||
009900 | 009933 | 009966 | 009999 | 0099cc | 0099ff | ||||||
00cc00 | 00cc33 | 00cc66 | 00cc99 | 00cccc | 00ccff | ||||||
00FF00 | 00ff33 | 00FF66 | 00ff99 | 00FFCC | 00FFFF | ||||||
330000 | 330033 | 330066 | 330099 | 3300cc | 3300ff | ||||||
333300 | 333333 | 333366 | 333399 | 3333cc | 3333ff | ||||||
336600 | 336633 | 336666 | 336699 | 3366cc | 3366ff | ||||||
339900 | 339933 | 339966 | 339999 | 3399cc | 3399ff | ||||||
33cc00 | 33cc33 | 33cc66 | 33cc99 | 33cccc | 33ccff | ||||||
33ff00 | 33FF33 | 33FF66 | 33ff99 | 33FFCC | 33FFFF | ||||||
660000 | 660033 | 660066 | 660099 | 6600cc | 6600ff | ||||||
663300 | 663333 | 663366 | 663399 | 6633cc | 6633ff | ||||||
666600 | 666633 | 666666 | 666699 | 6666cc | 6666ff | ||||||
669900 | 669933 | 669966 | 669999 | 6699cc | 6699ff | ||||||
66cc00 | 66cc33 | 66cc66 | 66cc99 | 66cccc | 66ccff | ||||||
66FF00 | 66FF33 | 66ff66 | 66ff99 | 66ffcc | 66FFFF | ||||||
990000 | 990033 | 990066 | 990099 | 9900cc | 9900ff | ||||||
993300 | 993333 | 993366 | 993399 | 9933cc | 9933ff | ||||||
996600 | 996633 | 996666 | 996699 | 9966cc | 9966ff | ||||||
999900 | 999933 | 999966 | 999999 | 9999cc | 9999ff | ||||||
99cc00 | 99cc33 | 99cc66 | 99cc99 | 99cccc | 99ccff | ||||||
99ff00 | 99ff33 | 99ff66 | 99ff99 | 99ffcc | 99ffff | ||||||
cc0000 | cc0033 | cc0066 | cc0099 | cc00cc | cc00ff | ||||||
cc3300 | cc3333 | cc3366 | cc3399 | cc33cc | cc33ff | ||||||
cc6600 | cc6633 | cc6666 | cc6699 | cc66cc | cc66ff | ||||||
cc9900 | cc9933 | cc9966 | cc9999 | cc99cc | cc99ff | ||||||
cccc00 | cccc33 | cccc66 | cccc99 | cccccc | ccccff | ||||||
ccff00 | ccff33 | CCFF66 | ccff99 | ccffcc | ccffff | ||||||
FF0000 | FF0033 | ff0066 | ff0099 | ff00cc | FF00FF | ||||||
ff3300 | ff3333 | ff3366 | ff3399 | ff33cc | ff33ff | ||||||
ff6600 | ff6633 | ff6666 | ff6699 | ff66cc | ff66ff | ||||||
ff9900 | ff9933 | ff9966 | ff9999 | ff99cc | ff99ff | ||||||
ffcc00 | ffcc33 | ffcc66 | ffcc99 | ffcccc | ffccff | ||||||
FFFF00 | FFFF33 | FFFF66 | ffff99 | ffffcc | FFFFFF |
In my opinion, using these colors exclusively limits your creative freedom unnecessarily in order to cater for bugs in certain browsers or operating systems. The actual effects of using other colors is not as catastrophic as you might expect, and will only affect a handful of your users. Clever use of alpha channels and GIF transparency in your images will also minimize the effect to the extent of making it unnoticeable.
For more information on colors and palettes, check out some of these pages: If you want help picking colors for your pages, try HTML with Style's own Colorizer, a Web-based tool that can help you preview multiple colors against a background and convert between notations. The World of Color in Dmitry's Design Lab contains many tips and tricks for selecting and using colors. The WebReference.com article Optimizing Web Graphics contains an interesting page on picking a palette for your images. Another article, Communicate with Color, discusses principles of color selection and matching. This article on WebMonkey is where the Reallysafe palette was first unleashed upon the world, and also contains information on the Websafe palette, its origins and the reasoning behind its use.
URL: https://www.webreference.com/html/reference/color/websafe.html
Produced by Stephanos Piperoglou
Created: December 13, 2000
Revised: October 6, 2003