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

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
CC CC CC
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.

image0.jpg

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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com