Web-Safe Color Palette – Is It Still Relevant?

I was recently asked in the classroom, whether it is still necessary to think about and use “web-safe” colors in graphics which will be used online. The question came about because we were looking at the Swatches palette in Photoshop and one of the options available under the context sensitive menu is Web Safe Colors.

Swatchespalette

If you’ve been working in web design for many years, you’re probably very familiar with this concept, but for anyone who’s new to designing online, here’s a brief explanation of what web-safe colors are and why they were necessary.

Computers monitors were not always the fine upstanding displays we know today. For a long time many monitors could only display 256 colors.  When a color was used in an image that was not available on the monitor, a different replacement one had to be used. This was either the closest color or a dithered color which was slow to render but could look better. In a bid to make a standard palette of colors which were safe to use on monitors capable of showing 256 colors, a set of 216 colors were chosen and these were known as the web-safe colors.

The “web-safe” colors do not all have standard names, but each can be specified by an RGB triplet: each component (red, green, and blue) takes one of the six values from the following table (out of the 256 possible values available for each component in full 24-bit color).

WebSafeTable

Table from Wikipedia

These days, modern computers generally have at least 16-bit color and often 24-bit color, which allows millions of colors to be displayed. Even modern phones, iPods and tablets can display more colors than the monitors of the early 90s, so there really is no need to stick with the web-safe palette anymore (unless you’re working for a client with a REALLY old computer who insists everything looks good on it). Today it’s more important to look at the contrast in your images rather than how many colors are used.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • onerob

    It was already an out-of-date concept in the mid nineties.

  • Peter Parker

    > unless you’re working for a client with a REALLY old computer who insists everything looks good on it

    Even then, it’s still a “no”.

  • jason

    Web safe stopped being relevant with the browser adoption of PNGs. These days developers should be concerned with embedding the correct color profile so it renders ideal (or close to it) on client machines.

  • Q.E.D.

    Has no one else noticed the discrepancy between colors on PCs and Macs? I have a page that I am designing on a PC with a background color whose hex code is identical to the blending code of the header image. It looks great on a PC but the colors do not translate the same on the Mac. Try it on each: http://www.desertmuseumdigitallibrary.org/kids/

    When I take a screen shot on the Mac and bring up the hex codes in Photoshop, I find that the background color for the page actually has a different hex code from what I programmed. This happens across browsers. I’ve considered the websafe palette, but those colors are really limited. Any ideas?

  • http://www.htmlbasictutor.ca/ HTMLBasicTutor

    What some designers don’t get is the average user does not tweak their monitor to the same optimal settings (Gama) as they do.

    Things can look great on the designer’s machine but on the client’s or average surfer’s it looks terrible.

    I can design something on my machine then check it on my laptop or the other “not tweaked” computer here and it will look different.

    And yes, there is also an issue between PCs and Macs as Q.E.D. pointed out. Been there, done that!