A web color chart displaying all the Netscape 216 browser-safe colors. Each swatch displays the HEX color code, the decimal RGB (red, green, blue) values and the CMY (cyan, majenta, yellow) percentage values. You can use this color system in cross-platform, cross-browser scripts.
Cross-Browser Colors
This color chart is recommended as being the best overall system for cross-browser, cross-platform web page scripting. It is suitable for display on Windows, Mac and Unix systems and the colors render well in all versions of the major browsers including Microsoft Internet Explorer, Netscape 4, Netscape 6/Gecko, Opera, etc.
Every serious web author should use a color system when applying or specifying color for their text, background or line-art bit images. This is to avoid dithering and a myriad of other color related problems that can beset color output. Netscape’s solution was their now famous ‘216 Browser Safe Colors’. It is a usable system that can be used in cross-platform scripts without any problems and this is the color system that we use in Web-Wise-Wizard. It is also fully supported by all the major bit-image graphics programs.
there is more textual information below the chart …
| Netscape 216 Browser Safe Colours | |||||
| #FFFFFFR=255 G=255 B=255 C=0 M=0 Y=0 | #FFFFCCR=255 G=255 B=204 C=0 M=0 Y=20 | #FFFF99R=255 G=255 B=153 C=0 M=0 Y=40 | #FFFF66R=255 G=255 B=102 C=0 M=0 Y=60 | #FFFF33R=255 G=255 B=51 C=0 M=0 Y=80 | #FFFF00R=255 G=255 B=0 C=0 M=0 Y=100 |
| #FFCCFFR=255 G=204 B=255 C=0 M=20 Y=0 | #FFCCCCR=255 G=204 B=204 C=0 M=20 Y=20 | #FFCC99R=255 G=204 B=153 C=0 M=20 Y=40 | #FFCC66R=255 G=204 B=102 C=0 M=20 Y=60 | #FFCC33R=255 G=204 B=51 C=0 M=20 Y=80 | #FFCC00R=255 G=204 B=0 C=0 M=20 Y=100 |
| #FF99FFR=255 G=153 B=255 C=0 M=40 Y=0 | #FF99CCR=255 G=153 B=204 C=0 M=40 Y=20 | #FF9999R=255 G=153 B=153 C=0 M=40 Y=40 | #FF9966R=255 G=153 B=102 C=0 M=40 Y=60 | #FF9933R=255 G=153 B=51 C=0 M=40 Y=80 | #FF9900R=255 G=153 B=0 C=0 M=40 Y=100 |
| #FF66FFR=255 G=102 B=255 C=0 M=60 Y=0 | #FF66CCR=255 G=102 B=204 C=0 M=60 Y=20 | #FF6699R=255 G=102 B=153 C=0 M=60 Y=40 | #FF6666R=255 G=102 B=102 C=0 M=60 Y=60 | #FF6633R=255 G=102 B=51 C=0 M=60 Y=80 | #FF6600R=255 G=102 B=0 C=0 M=60 Y=100 |
| #FF33FFR=255 G=51 B=255 C=0 M=80 Y=0 | #FF33CCR=255 G=51 B=204 C=0 M=80 Y=20 | #FF3399R=255 G=51 B=153 C=0 M=80 Y=40 | #FF3366R=255 G=51 B=102 C=0 M=80 Y=60 | #FF3333R=255 G=51 B=51 C=0 M=80 Y=80 | #FF3300R=255 G=51 B=0 C=0 M=80 Y=100 |
| #FF00FFR=255 G=0 B=255 C=0 M=100 Y=0 | #FF00CCR=255 G=0 B=204 C=0 M=100 Y=20 | #FF0099R=255 G=0 B=153 C=0 M=100 Y=40 | #FF0066R=255 G=0 B=102 C=0 M=100 Y=60 | #FF0033R=255 G=0 B=51 C=0 M=100 Y=80 | #FF0000R=255 G=0 B=0 C=0 M=100 Y=100 |
| #CCFFFFR=204 G=255 B=255 C=20 M=0 Y=0 | #CCFFCCR=204 G=255 B=204 C=20 M=0 Y=20 | #CCFF99R=204 G=255 B=153 C=20 M=0 Y=40 | #CCFF66R=204 G=255 B=102 C=20 M=0 Y=60 | #CCFF33R=204 G=255 B=51 C=20 M=0 Y=80 | #CCFF00R=204 G=255 B=0 C=20 M=0 Y=100 |
| #CCCCFFR=204 G=204 B=255 C=20 M=20 Y=0 | #CCCCCCR=204 G=204 B=204 C=20 M=20 Y=20 | #CCCC99R=204 G=204 B=153 C=20 M=20 Y=40 | #CCCC66R=204 G=204 B=102 C=20 M=20 Y=60 | #CCCC33R=204 G=204 B=51 C=20 M=20 Y=80 | #CCCC00R=204 G=204 B=0 C=20 M=20 Y=100 |
| #CC99FFR=204 G=153 B=255 C=20 M=40 Y=0 | #CC99CCR=204 G=153 B=204 C=20 M=40 Y=20 | #CC9999R=204 G=153 B=153 C=20 M=40 Y=40 | #CC9966R=204 G=153 B=102 C=20 M=40 Y=60 | #CC9933R=204 G=153 B=51 C=20 M=40 Y=80 | #CC9900R=204 G=153 B=0 C=20 M=40 Y=100 |
| #CC66FFR=204 G=102 B=255 C=20 M=60 Y=0 | #CC66CCR=204 G=102 B=204 C=20 M=60 Y=20 | #CC6699R=204 G=102 B=153 C=20 M=60 Y=40 | #CC6666R=204 G=102 B=102 C=20 M=60 Y=60 | #CC6633R=204 G=102 B=51 C=20 M=60 Y=80 | #CC6600R=204 G=102 B=0 C=20 M=60 Y=100 |
| #CC33FFR=204 G=51 B=255 C=20 M=80 Y=0 | #CC33CCR=204 G=51 B=204 C=20 M=80 Y=20 | #CC3399R=204 G=51 B=153 C=20 M=80 Y=40 | #CC3366R=204 G=51 B=102 C=20 M=80 Y=60 | #CC3333R=204 G=51 B=51 C=20 M=80 Y=80 | #CC3300R=204 G=51 B=0 C=20 M=80 Y=100 |
| #CC00FFR=204 G=0 B=255 C=20 M=100 Y=0 | #CC00CCR=204 G=0 B=204 C=20 M=100 Y=20 | #CC0099R=204 G=0 B=153 C=20 M=100 Y=40 | #CC0066R=204 G=0 B=102 C=20 M=100 Y=60 | #CC0033R=204 G=0 B=51 C=20 M=100 Y=80 | #CC0000R=204 G=0 B=0 C=20 M=100 Y=100 |
| #99FFFFR=153 G=255 B=255 C=40 M=0 Y=0 | #99FFCCR=153 G=255 B=204 C=40 M=0 Y=20 | #99FF99R=153 G=255 B=153 C=40 M=0 Y=40 | #99FF66R=153 G=255 B=102 C=40 M=0 Y=60 | #99FF33R=153 G=255 B=51 C=40 M=0 Y=80 | #99FF00R=153 G=255 B=0 C=40 M=0 Y=100 |
| #99CCFFR=153 G=204 B=255 C=40 M=20 Y=0 | #99CCCCR=153 G=204 B=204 C=40 M=20 Y=20 | #99CC99R=153 G=204 B=153 C=40 M=20 Y=40 | #99CC66R=153 G=204 B=102 C=40 M=20 Y=60 | #99CC33R=153 G=204 B=51 C=40 M=20 Y=80 | #99CC00R=153 G=204 B=0 C=40 M=20 Y=100 |
| #9999FFR=153 G=153 B=255 C=40 M=40 Y=0 | #9999CCR=153 G=153 B=204 C=40 M=40 Y=20 | #999999R=153 G=153 B=153 C=40 M=40 Y=40 | #999966R=153 G=153 B=102 C=40 M=40 Y=60 | #999933R=153 G=153 B=51 C=40 M=40 Y=80 | #999900R=153 G=153 B=0 C=40 M=40 Y=100 |
| #9966FFR=153 G=102 B=255 C=40 M=60 Y=0 | #9966CCR=153 G=102 B=204 C=40 M=60 Y=20 | #996699R=153 G=102 B=153 C=40 M=60 Y=40 | #996666R=153 G=102 B=102 C=40 M=60 Y=60 | #996633R=153 G=102 B=51 C=40 M=60 Y=80 | #996600R=153 G=102 B=0 C=40 M=60 Y=100 |
| #9933FFR=153 G=51 B=255 C=40 M=80 Y=0 | #9933CCR=153 G=51 B=204 C=40 M=80 Y=20 | #993399R=153 G=51 B=153 C=40 M=80 Y=40 | #993366R=153 G=51 B=102 C=40 M=80 Y=60 | #993333R=153 G=51 B=51 C=40 M=80 Y=80 | #993300R=153 G=51 B=0 C=40 M=80 Y=100 |
| #9900FFR=153 G=0 B=255 C=40 M=100 Y=0 | #9900CCR=153 G=0 B=204 C=40 M=100 Y=20 | #990099R=153 G=0 B=153 C=40 M=100 Y=40 | #990066R=153 G=0 B=102 C=40 M=100 Y=60 | #990033R=153 G=0 B=51 C=40 M=100 Y=80 | #990000R=153 G=0 B=0 C=40 M=100 Y=100 |
| #66FFFFR=102 G=255 B=255 C=60 M=0 Y=0 | #66FFCCR=102 G=255 B=204 C=60 M=0 Y=20 | #66FF99R=102 G=255 B=153 C=60 M=0 Y=40 | #66FF66R=102 G=255 B=102 C=60 M=0 Y=60 | #66FF33R=102 G=255 B=51 C=60 M=0 Y=80 | #66FF00R=102 G=255 B=0 C=60 M=0 Y=100 |
| #66CCFFR=102 G=204 B=255 C=60 M=20 Y=0 | #66CCCCR=102 G=204 B=204 C=60 M=20 Y=20 | #66CC99R=102 G=204 B=153 C=60 M=20 Y=40 | #66CC66R=102 G=204 B=102 C=60 M=20 Y=60 | #66CC33R=102 G=204 B=51 C=60 M=20 Y=80 | #66CC00R=102 G=204 B=0 C=60 M=20 Y=100 |
| #6699FFR=102 G=153 B=255 C=60 M=40 Y=0 | #6699CCR=102 G=153 B=204 C=60 M=40 Y=20 | #669999R=102 G=153 B=153 C=60 M=40 Y=40 | #669966R=102 G=153 B=102 C=60 M=40 Y=60 | #669933R=102 G=153 B=51 C=60 M=40 Y=80 | #669900R=102 G=153 B=0 C=60 M=40 Y=100 |
| #6666FFR=102 G=102 B=255 C=60 M=60 Y=0 | #6666CCR=102 G=102 B=204 C=60 M=60 Y=20 | #666699R=102 G=102 B=153 C=60 M=60 Y=40 | #666666R=102 G=102 B=102 C=60 M=60 Y=60 | #666633R=102 G=102 B=51 C=60 M=60 Y=80 | #666600R=102 G=102 B=0 C=60 M=60 Y=100 |
| #6633FFR=102 G=51 B=255 C=60 M=80 Y=0 | #6633CCR=102 G=51 B=204 C=60 M=80 Y=20 | #663399R=102 G=51 B=153 C=60 M=80 Y=40 | #663366R=102 G=51 B=102 C=60 M=80 Y=60 | #663333R=102 G=51 B=51 C=60 M=80 Y=80 | #663300R=102 G=51 B=0 C=60 M=80 Y=100 |
| #6600FFR=102 G=0 B=255 C=60 M=100 Y=0 | #6600CCR=102 G=0 B=204 C=60 M=100 Y=20 | #660099R=102 G=0 B=153 C=60 M=100 Y=40 | #660066R=102 G=0 B=102 C=60 M=100 Y=60 | #660033R=102 G=0 B=51 C=60 M=100 Y=80 | #660000R=102 G=0 B=0 C=60 M=100 Y=100 |
| #33FFFFR=51 G=255 B=255 C=80 M=0 Y=0 | #33FFCCR=51 G=255 B=204 C=80 M=0 Y=20 | #33FF99R=51 G=255 B=153 C=80 M=0 Y=40 | #33FF66R=51 G=255 B=102 C=80 M=0 Y=60 | #33FF33R=51 G=255 B=51 C=80 M=0 Y=80 | #33FF00R=51 G=255 B=0 C=80 M=0 Y=100 |
| #33CCFFR=51 G=204 B=255 C=80 M=20 Y=0 | #33CCCCR=51 G=204 B=204 C=80 M=20 Y=20 | #33CC99R=51 G=204 B=153 C=80 M=20 Y=40 | #33CC66R=51 G=204 B=102 C=80 M=20 Y=60 | #33CC33R=51 G=204 B=51 C=80 M=20 Y=80 | #33CC00R=51 G=204 B=0 C=80 M=20 Y=100 |
| #3399FFR=51 G=153 B=255 C=80 M=40 Y=0 | #3399CCR=51 G=153 B=204 C=80 M=40 Y=20 | #339999R=51 G=153 B=153 C=80 M=40 Y=40 | #339966R=51 G=153 B=102 C=80 M=40 Y=60 | #339933R=51 G=153 B=51 C=80 M=40 Y=80 | #339900R=51 G=153 B=0 C=80 M=40 Y=100 |
| #3366FFR=51 G=102 B=255 C=80 M=60 Y=0 | #3366CCR=51 G=102 B=204 C=80 M=60 Y=20 | #336699R=51 G=102 B=153 C=80 M=60 Y=40 | #336666R=51 G=102 B=102 C=80 M=60 Y=60 | #336633R=51 G=102 B=51 C=80 M=60 Y=80 | #336600R=51 G=102 B=0 C=80 M=60 Y=100 |
| #3333FFR=51 G=51 B=255 C=80 M=80 Y=0 | #3333CCR=51 G=51 B=204 C=80 M=80 Y=20 | #333399R=51 G=51 B=153 C=80 M=80 Y=40 | #333366R=51 G=51 B=102 C=80 M=80 Y=60 | #333333R=51 G=51 B=51 C=80 M=80 Y=80 | #333300R=51 G=51 B=0 C=80 M=80 Y=100 |
| #3300FFR=51 G=0 B=255 C=80 M=100 Y=0 | #3300CCR=51 G=0 B=204 C=80 M=100 Y=20 | #330099R=51 G=0 B=153 C=80 M=100 Y=40 | #330066R=51 G=0 B=102 C=80 M=100 Y=60 | #330033R=51 G=0 B=51 C=80 M=100 Y=80 | #330000R=51 G=0 B=0 C=80 M=100 Y=100 |
| #00FFFFR=0 G=255 B=255 C=100 M=0 Y=0 | #00FFCCR=0 G=255 B=204 C=100 M=0 Y=20 | #00FF99R=0 G=255 B=153 C=100 M=0 Y=40 | #00FF66R=0 G=255 B=102 C=100 M=0 Y=60 | #00FF33R=0 G=255 B=51 C=100 M=0 Y=80 | #00FF00R=0 G=255 B=0 C=100 M=0 Y=100 |
| #00CCFFR=0 G=204 B=255 C=100 M=20 Y=0 | #00CCCCR=0 G=204 B=204 C=100 M=20 Y=20 | #00CC99R=0 G=204 B=153 C=100 M=20 Y=40 | #00CC66R=0 G=204 B=102 C=100 M=20 Y=60 | #00CC33R=0 G=204 B=51 C=100 M=20 Y=80 | #00CC00R=0 G=204 B=0 C=100 M=20 Y=100 |
| #0099FFR=0 G=153 B=255 C=100 M=40 Y=0 | #0099CCR=0 G=153 B=204 C=100 M=40 Y=20 | #009999R=0 G=153 B=153 C=100 M=40 Y=40 | #009966R=0 G=153 B=102 C=100 M=40 Y=60 | #009933R=0 G=153 B=51 C=100 M=40 Y=80 | #009900R=0 G=153 B=0 C=100 M=40 Y=100 |
| #0066FFR=0 G=102 B=255 C=100 M=60 Y=0 | #0066CCR=0 G=102 B=204 C=100 M=60 Y=20 | #006699R=0 G=102 B=153 C=100 M=60 Y=40 | #006666R=0 G=102 B=102 C=100 M=60 Y=60 | #006633R=0 G=102 B=51 C=100 M=60 Y=80 | #006600R=0 G=102 B=0 C=100 M=60 Y=100 |
| #0033FFR=0 G=51 B=255 C=100 M=80 Y=0 | #0033CCR=0 G=51 B=204 C=100 M=80 Y=20 | #003399R=0 G=51 B=153 C=100 M=80 Y=40 | #003366R=0 G=51 B=102 C=100 M=80 Y=60 | #003333R=0 G=51 B=51 C=100 M=80 Y=80 | #003300R=0 G=51 B=0 C=100 M=80 Y=100 |
| #0000FFR=0 G=0 B=255 C=100 M=100 Y=0 | #0000CCR=0 G=0 B=204 C=100 M=100 Y=20 | #000099R=0 G=0 B=153 C=100 M=100 Y=40 | #000066R=0 G=0 B=102 C=100 M=100 Y=60 | #000033R=0 G=0 B=51 C=100 M=100 Y=80 | #000000R=0 G=0 B=0 C=100 M=100 Y=100 |
The Color Chart
People sometimes wonder how Netscape arrived at this apparently peculiar range of colors and we have included the CMY (cyan, majenta and yellow) values in the chart to show you. In simplified terms the colors were arrived at by incrementing the base CMY colors in 20% steps from 0% through to 100%. Study the chart above to see a mix of this pattern repeated throughout. These CMY colors were then converted to their RGB hexadecimal equivalent for specifying color on a web page and into RGB decimal for specifying color in a graphics programs, etc.
The Chart’s Accuracy
Most Web color charts of this type are written in plain old HTML and we haven’t managed to find a color chart written in this manner that does not contain typos and other errors. Given some thought it becomes obvious that individually typing each of the hex color codes and each of the three types of value displayed above is bound to lead to errors. It is an onerous job and there is no practical way you can properly check every color and value.
We decided that a different approach was needed and so we brought our programming experience to bear on the problem. When designing this color chart we use JavaScript to dynamically create the chart from a base table and from color calculations. The result is a totally accurate chart where every color, hex color code and displayed value is accurate.
