HTML XHTML The Complete Reference
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.

(X)HTML Elements
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
< Home | About | Chapters | Examples | Errata | Reference | Site Map >