How to Use the Web-Safe Color Palette for Your HTML5 and CSS3 Based Web Pages

By Andy Harris

A long time ago, browsers couldn’t even agree on what colors they’d display reliably. HTML5 and CSS3 web developers responded by working within a predefined palette of colors that worked pretty much the same on every browser. Today’s browsers have no problems showing lots of colors, but the so-called web-safe color palette is still sometimes used because it’s an easy starting point.

The primary colors are all made of 0s and Fs: #FF0000is red (all red, no green, no blue). A web-safe color uses any combination of these values, so is web-safe, but is not.

Description Red Green Blue
Very bright FF FF FF
99 99 99
66 66 66
33 33 33
Very dark 00 00 00

To pick a web-safe value from this chart, determine how much of each color you want. A bright red will have red turned on all the way (FF) with no green (00) and no blue (00), making #FF0000. If you want a darker red, you might turn the red down a little. The next darker web-safe red is #CC0000. If that isn’t dark enough, you might try #990000.

Say you like that, but you want it a little purple. Simply add a notch or two of blue: #990033 or #990066.


The original problem web-safe colors were designed to alleviate is long resolved, but they’re still popular as a starting point. Web-safe colors give you a dispersed and easily understood subset of colors you can start with. You don’t have to stay there, but it’s a great place to start.