an All Creative World site
Ivan's picture

Choose web smart colors

4096 Color WheelWhen you design web sites, you need to be careful to choose web smart colors. Here is a good explanation from the 4096 Color Wheel site about what web smart colors are:

Once, long ago, monitors could display only a restricted number of colors without dithering or other color discrepancies. The traditional solution to this problem was to use a restricted color palette known as the Netscape 216 colors, browser-safe colors or the web-safe colors. In hexadecimal form, the web-safe colors are composed of three pairs of identical hexadecimal digits selected from 00, 33, 66, 99, cc, and ff; for example, #000000 is black, and #cc0000 is red.

Time passed, as it so frequently does, and new hardware supported thousands or millions of colors. People grew tired of the old 216 colors. They wanted more earth tones, more variety. The web-smart colors are those 4096 colors composed of any three pairs of identical hexadeximal digits (0-9 and a-f), such as #dd1188.

The unsafe colors are the full set of 16,777,216 hexadecimal colors, featuring any color between #000000 and #ffffff, such as #5a832d.

To choose a web smart color palette for your project go to 4096 Color Wheel. Then take a screenshot, so that you can pick colors from it while you work on your layouts. If you want help to create a color palette that fits a certain starting color check out this previous post about selecting color schemes.

Commenting on this Blog entry is closed.

alisdair's picture

"When you design web sites, you need to be careful to choose web smart colors."

Why? Why not just use whatever colours I feel like? What advantages are there to using this 4096-colour palette?

Ivan's picture

Fair question. I should've expanded on that.

Basically if you just choose any color, you risk that on certain browsers and systems your colors will not look like you intended. Because certain systems can't display millions of colors, your million color design will be simplified down to thousands or 256 colors.

Besides the color alteration that migh occur, it can become difficult to distinguish certain parts of the design from others, because shades of a certain color could look all the same. For example here is demo how colors with small difference in shade can look like it's all the same color on certain browsers.

mdc's picture

thanks for explaining that ivan.
i have always heard of the websafe colors but never why they should be used.

that link you provided is interesting.

Anonymous's picture

I think this is a bit like the argument that a website should work in Netscape 4 of IE 3. Personally, when I do design, I don't care anymore about the 5 potential users still on IE 3/Win95 ... nor do I care much about people with 640x480 displays or 4096-colour cellphone screens.

Trevor Morris's picture

Interesting post, but what are "web-smart" colors? I do not understand the correlation between Web-safe and Web-smart colors. What happens to a Web-smart color on an 8-bit display?

Ivan's picture

web smart = 4096 colors
web safe = 256 colors

a web smart color on an 8 bit display will not work well, but nowadays it's very rare to find an 8 bit display. so, basically the industry upgraded to web smart from web safe.

Trevor Morris's picture

Alright, fair enough; but what are the benefits of using Web smart colors vs. just using any of the colors in the 24-bit palette?

Vitaly Friedman's picture

Hi,

thanks for a useful article!

Besides, I guess you might find some interesting tools in my bookmarks - "Bookmarks for web designers" (http://www.alvit.de/vf/en/00_webtools.html). Still, thanks!

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Featured Images

Do you need a great new logo?

If you need a logo for your company or product you can get it done with us.
In our logo store you can pick from over 28,000 pre-made logos that will be customized to your name for free or you can post a contest for us for just $250 and our designers from all over the world will submit dozens of logo design suggestions to your specific needs.

Marketplace