Web Safe Colors

Not all colors are web safe.

Choosing web safe colors for a website guarantees that all visitors will see the text, background, and graphics just as they were intended, no matter which computer platform or browser is used.

About Web Safe Colors

Displaying hundreds or thousands of different colors requires a tremendous amount of computer memory and an advanced graphics card. In the 1990s when the World Wide Web was in its infancy, most computers operated in an 8-bit configuration that limited them to a maximum of 256 colors. To ensure that different computer platforms, primarily Windows and Macintosh, were able to see colors correctly, programmers developed a set of universal safe colors for Internet use through a mathematical formula that guaranteed programming and display precision. The resulting 216 colors - 40 shades were confined to individual platforms - were also known as the browser-safe palette and the 6x6x6 color cube, and for years using them was standard procedure for any web design. This allowed web pages to be viewed accurately in different browsers, primarily Netscape and Internet Explorer.

The Web Safe Palette

The safe colors ranged across the spectrum and included a wide variety of shades such as yellow, red, blue, pink, green, aqua, brown, orange, black, and white in assorted shades. Most of the hues were heavily saturated and strong shades, since softer pastels were harder to differentiate with the naked eye. Below is the 216 color web safe palette along with the hex codes that represent those colors.

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

Read more about HTML color codes.

Web Safe Photos

Adding photos to websites created new difficulties with color variations, and to compensate many photos were "dithered" to approximate the right tones and hues. Dithering is the process of adjusting pixels by alternating the two closest shades and gradually shifting to the new hue instead of a stark transition. Photo quality was naturally lower, but dithering helped smooth differences between adjacent shades more naturally than abrupt color shifts.

Today's Safe Colors

As computer technology has advanced and both greater memory capacity and sophisticated graphics cards have become more affordable, it is less necessary to use designated safe colors when designing a website. Most computers today use a 16 or 24 bit system that can display millions of colors accurately regardless of the operating platform or web browser, though cautious programmers may still want to use safe shades for text, backgrounds, links, and other basic website elements to ensure consistency for visitors with older computer systems.

Another benefit of using safe colors on today's computers is that since they require less memory, websites will load faster and more conveniently. This is particularly beneficial for users with older equipment or slower modems, since more intensive graphics and websites can be delayed or dysfunctional on less advanced computer systems.

Web safe colors are also best to use if websites are being designed primarily for access on cell phones and other mobile technology. While advanced camera phones and upgraded models may well have better color settings and the memory space for a greater range of shades, less sophisticated equipment will work best with a web safe palette.

Tips for a Color Safe Website

While it may no longer be necessary for web designers to choose only from the range of web safe colors, it is still prudent to create a coordinated, pleasing color scheme for any website. Tips for how to build a web page with appropriate color safety include:

  • Choose web safe shades for basic page elements, such as a generic background, text, links, visited, links, and other items.
  • Avoid fluorescent colors in large blocks that will be glaring and disruptive.
  • Dark text on a light background is the most readable and visitor-friendly option; black text on a white background is optimal.
  • Choose a suitably contrasting shade for hyperlink text so links stand out from other page text.
  • If possible, reduce the number of colors in photographs and graphics so they will use less memory and load more quickly. Most graphics programs can easily convert images to a web safe palette.
  • Avoid multiple color changes and a wide rainbow of hues on a single page; this can be distracting and disorienting to readers.

While using web safe colors may no longer be necessary, web designers who understand the principles of color compatibility and why a web safe palette was designed will be better able to create color-coordinated websites in pleasing shades, no matter what colors they choose.

Web Safe Colors