home » reference » appendix e » browser safe colors

Browser Safe Colors

While 8-bit GIF images support 256 colors, cross-platform issues leave a palette of only 216 colors that are completely safe to use on the Web. This group of Web-safe colors is often called the browser-safe palette. Use of other colors beyond this safe set can lead to poor-looking images when viewed under limited color conditions such as 8-bit (256 color) VGA.

Selecting a set of colors from the safe color palette and mixing them together in a process called dithering will approximate colors outside the safe range. In short, dithering attempts to imitate colors by placing similar colors near them, but generally creates irregularities that render the image unappealing.

CSS Properties

The selection of the 216 safe colors is fairly obvious if you consider the additive nature of RGB color. Consider a color to be made up of varying amounts of red, green, or blue that could be set by adjusting an imaginary color dial from the extremes of no color to maximum color saturation. The safe colors use six possible intensity settings for each value of red, green or blue. The settings are 0%, 20%, 40%, 60%, 80%, and 100%. Avalue of 0%, 0%, 0% on the imaginary color dial would be equivalent to black. A value of 100%, 100%, 100% would indicate pure white, while a value of 100%, 0%, 0% is pure red, and so on. The safe colors are those that have an RGB value set only at one of the safe intensity settings. The hex conversions for saturation are shown in Table E-1.

FFFFFF R: 255 G: 255 B: 255	FFFFCC R: 255 G: 255 B: 204	FFFF99 R: 255 G: 255 B: 153	FFFF66 R: 255 G: 255 B: 102	FFFF33 R: 255 G: 255 B: 51	FFFF00 R: 255 G: 255 B: 0	FFCCFF R: 255 G: 204 B: 255	FFCCCC R: 255 G: 204 B: 204
FFCC99 R: 255 G: 204 B: 153	FFCC66 R: 255 G: 204 B: 102	FFCC33 R: 255 G: 204 B: 51	FFCC00 R: 255 G: 204 B: 0	FF99FF R: 255 G: 153 B: 255	FF99CC R: 255 G: 153 B: 204	FF9999 R: 255 G: 153 B: 153	FF9966 R: 255 G: 153 B: 102
FF9933 R: 255 G: 153 B: 51	FF9900 R: 255 G: 153 B: 0	FF66FF R: 255 G: 102 B: 255	FF66CC R: 255 G: 102 B: 204	FF6699 R: 255 G: 102 B: 153	FF6666 R: 255 G: 102 B: 102	FF6633 R: 255 G: 102 B: 51	FF6600 R: 255 G: 102 B: 0
FF33FF R: 255 G: 51 B: 255	FF33CC R: 255 G: 51 B: 204	FF3399 R: 255 G: 51 B: 153	FF3366 R: 255 G: 51 B: 102	FF3333 R: 255 G: 51 B: 51	FF3300 R: 255 G: 51 B: 0	FF00FF R: 255 G: 0 B: 255	FF00CC R: 255 G: 0 B: 204
FF0099 R: 255 G: 0 B: 153	FF0066 R: 255 G: 0 B: 102	FF0033 R: 255 G: 0 B: 51	FF0000 R: 255 G: 0 B: 0	CCFFFF R: 204 G: 255 B: 255	CCFFCC R: 204 G: 255 B: 204	CCFF99 R: 204 G: 255 B: 153	CCFF66 R: 204 G: 204 B: 102
CCFF33 R: 204 G: 255 B: 51	CCFF00 R: 204 G: 255 B: 0	CCCCFF R: 204 G: 204 B: 255	CCCCCC R: 204 G: 204 B: 204	CCCC99 R: 204 G: 204 B: 153	CCCC66 R: 204 G: 204 B: 102	CCCC33 R: 204 G: 204 B: 51	CCCC00 R: 204 G: 204 B: 0
CC99FF R: 204 G: 153 B: 255	CC99CC R: 204 G: 153 B: 204	CC9999 R: 204 G: 153 B: 153	CC9966 R: 204 G: 153 B: 102	CC9933 R: 204 G: 153 B: 51	CC9900 R: 204 G: 153 B: 0	CC66FF R: 204 G: 102 B: 255	CC66CC R: 204 G: 102 B: 204
CC6699 R: 204 G: 102 B: 153	CC6666 R: 204 G: 102 B: 102	CC6633 R: 204 G: 102 B: 51	CC6600 R: 204 G: 102 B: 0	CC33FF R: 204 G: 51 B: 255	CC33CC R: 204 G: 51 B: 204	CC3399 R: 204 G: 51 B: 153	CC3366 R: 204 G: 51 B: 102
CC3333 R: 204 G: 51 B: 51	CC3300 R: 204 G: 51 B: 0	CC00FF R: 204 G: 0 B: 255	CC00CC R: 204 G: 0 B: 204	CC0099 R: 204 G: 0 B: 153	CC0066 R: 204 G: 0 B: 102	CC0033 R: 204 G: 0 B: 51	CC0000 R: 204 G: 0 B: 0
99FFFF R: 153 G: 255 B: 255	99FFCC R: 153 G: 255 B: 204	99FF99 R: 153 G: 255 B: 153	99FF66 R: 153 G: 255 B: 102	99FF33 R: 153 G: 255 B: 51	99FF00 R: 153 G: 255 B: 0	99CCFF R: 153 G: 204 B: 255	99CCCC R: 153 G: 204 B: 204
99CC99 R: 153 G: 204 B: 153	99CC66 R: 153 G: 204 B: 102	99CC33 R: 153 G: 204 B: 51	99CC00 R: 153 G: 204 B: 0	9999FF R: 153 G: 153 B: 255	9999CC R: 153 G: 153 B: 204	999999 R: 153 G: 153 B: 153	999966 R: 153 G: 153 B: 102
999933 R: 153 G: 153 B: 51	999900 R: 153 G: 153 B: 0	9966FF R: 153 G: 102 B: 255	9966CC R: 153 G: 102 B: 204	996699 R: 153 G: 102 B: 153	996666 R: 153 G: 102 B: 102	996633 R: 153 G: 102 B: 51	996600 R: 153 G: 102 B: 0
9933FF R: 153 G: 51 B: 255	9933CC R: 153 G: 51 B: 204	993399 R: 153 G: 51 B: 153	993366 R: 153 G: 51 B: 102	993333 R: 153 G: 51 B: 51	993300 R: 153 G: 51 B: 0	9900FF R: 153 G: 0 B: 255	9900CC R: 153 G: 0 B: 204
990099 R: 153 G: 0 B: 153	990066 R: 153 G: 0 B: 102	990033 R: 153 G: 0 B: 51	990000 R: 153 G: 0 B: 0	66FFFF R: 102 G: 255 B: 255	66FFCC R: 102 G: 255 B: 204	66FF99 R: 102 G: 255 B: 153	66FF66 R: 102 G: 255 B: 102
66FF33 R: 102 G: 255 B: 51	66FF00 R: 102 G: 255 B: 0	66CCFF R: 102 G: 204 B: 255	66CCCC R: 102 G: 204 B: 204	66CC99 R: 102 G: 204 B: 153	66CC66 R: 102 G: 204 B: 102	66CC33 R: 102 G: 204 B: 51	66CC00 R: 102 G: 204 B: 0
6699FF R: 102 G: 153 B: 255	6699CC R: 102 G: 153 B: 204	669999 R: 102 G: 153 B: 153	669966 R: 102 G: 153 B: 102	669933 R: 102 G: 153 B: 51	669900 R: 102 G: 153 B: 0	6666FF R: 102 G: 102 B: 255	6666CC R: 102 G: 102 B: 204
666699 R: 102 G: 102 B: 153	666666 R: 102 G: 102 B: 102	666633 R: 102 G: 102 B: 51	666600 R: 102 G: 102 B: 0	6633FF R: 102 G: 51 B: 255	6633CC R: 102 G: 51 B: 204	663399 R: 102 G: 51 B: 153	663366 R: 102 G: 51 B: 102
663333 R: 102 G: 51 B: 51	663300 R: 102 G: 51 B: 0	6600FF R: 102 G: 0 B: 255	6600CC R: 102 G: 0 B: 204	660099 R: 102 G: 0 B: 153	660066 R: 102 G: 0 B: 102	660033 R: 102 G: 0 B: 51	660000 R: 102 G: 0 B: 0
33FFFF R: 51 G: 255 B: 255	33FFCC R: 51 G: 255 B: 204	33FF99 R: 51 G: 255 B: 153	33FF66 R: 51 G: 255 B: 102	33FF33 R: 51 G: 255 B: 51	33FF00 R: 51 G: 255 B: 0	33CCFF R: 51 G: 204 B: 255	33CCCC R: 51 G: 204 B: 204
33CC99 R: 51 G: 204 B: 153	33CC66 R: 51 G: 204 B: 102	33CC33 R: 51 G: 204 B: 51	33CC00 R: 51 G: 204 B: 0	3399FF R: 51 G: 153 B: 255	3399CC R: 51 G: 153 B: 204	339999 R: 51 G: 153 B: 153	339966 R: 51 G: 153 B: 102
339933 R: 51 G: 153 B: 51	339900 R: 51 G: 153 B: 0	3366FF R: 51 G: 102 B: 255	3366CC R: 51 G: 102 B: 204	336699 R: 51 G: 102 B: 153	336666 R: 51 G: 102 B: 102	336633 R: 51 G: 102 B: 51	336600 R: 51 G: 102 B: 0
3333FF R: 51 G: 51 B: 255	3333CC R: 51 G: 51 B: 204	333399 R: 51 G: 51 B: 153	333366 R: 51 G: 51 B: 102	333333 R: 51 G: 51 B: 51	333300 R: 51 G: 51 B: 0	3300FF R: 51 G: 0 B: 255	3300CC R: 51 G: 0 B: 204
330099 R: 51 G: 0 B: 153	330066 R: 51 G: 0 B: 102	330033 R: 51 G: 0 B: 51	330000 R: 51 G: 0 B: 0	00FFFF R: 0 G: 255 B: 255	00FFCC R: 0 G: 255 B: 204	00FF99 R: 0 G: 255 B: 153	00FF66 R: 0 G: 255 B: 102
00FF33 R: 0 G: 255 B: 51	00FF00 R: 0 G: 255 B: 0	00CCFF R: 0 G: 204 B: 255	00CCCC R: 0 G: 204 B: 204	00CC99 R: 0 G: 204 B: 153	00CC66 R: 0 G: 204 B: 102	00CC33 R: 0 G: 204 B: 51	00CC00 R: 0 G: 204 B: 0
0099FF R: 0 G: 153 B: 255	0099CC R: 0 G: 153 B: 204	009999 R: 0 G: 153 B: 153	009966 R: 0 G: 153 B: 102	009933 R: 0 G: 153 B: 51	009900 R: 0 G: 1535 B: 0	0066FF R: 0 G: 102 B: 255	0066CC R: 0 G: 102 B: 204
006699 R: 0 G: 102 B: 153	006666 R: 0 G: 102 B: 102	006633 R: 0 G: 102 B: 51	006600 R: 0 G: 102 B: 0	0033FF R: 0 G: 51 B: 255	0033CC R: 0 G: 51 B: 204	003399 R: 0 G: 51 B: 153	003366 R: 0 G: 51 B: 102
003333 R: 0 G: 51 B: 51	003300 R: 0 G: 51 B: 0	0000FF R: 0 G: 0 B: 255	0000CC R: 0 G: 0 B: 204	000099 R: 0 G: 0 B: 153	000066 R: 0 G: 0 B: 102	000033 R: 0 G: 0 B: 51	000000 R: 0 G: 0 B: 0

Use of other colors beyond this safe set can lead to poor-looking images when viewed under limited color conditions such as 8-bit (256 color) VGA. Selecting a set of colors from the safe color palette and mixing them together in a process called dithering will approximate colors outside the safe range. In short, dithering attempts to imitate colors by placing similar colors near them, but generally creates irregularities that render the image unappealing.

The selection of the 216 safe colors is fairly obvious if you consider the additive nature of RGB color. Consider a color to be made up of varying amounts of red, green, or blue that could be set by adjusting an imaginary color dial from the extremes of no color to maximum color saturation. The safe colors suggest six possible intensity settings for each value of red, green or blue. The settings are 0%, 20%, 40%, 60%, 80%, and 100%. A value of 0%, 0%, 0% on the imaginary color dial would be equivalent to black. A value of 100%, 100%, 100% would indicate pure white, while a value of 100%, 0%, 0% is pure red, and so on. The safe colors are those that have an RGB value set only at one of the safe intensity settings. The hex conversions for saturation are shown in Table E-1.

Table E-1: Color Intensity Conversion Table
Color Intensity	Hex Value	Decimal Value
100%	FF	255
80%	CC	204
60%	99	153
40%	66	102
20%	33	51
0%	00	0

Setting a safe color is simply a matter of selecting a combination of safe hex values. In this case, #9966FF is a safe hex color; #9370DB is not. Most Web design tools like Macromedia Dreamweaver or Allaire HomeSite contain safe color pickers; so do imaging tools like Macromedia Fireworks or recent versions of Adobe PhotoShop. Designers looking for color palettes, including improved color pickers and swatches, should visit http://www.visibone.com/colorlab/.

Next: RGB to Hexadecimal Color Conversion Chart