No matter how many millions of colors the average computer can show, there is this clear tendency among leading websites to stick to only a few of them.
The main reason is that only 216 colors look exactly the same on all browsers.
Different browsers interpret all other colors differently.
Stupid, yes, but more importantly: true!
This does not mean (as it is often misunderstood) that only these 216 colors should be used.
Many leading websites (including the most visited: Yahoo) use more than the 216 browser-safe colors - BUT:
Non-browser-safe colors should only be used where images do not fade into the background. |
Look at these examples:
EXAMPLE 1 | EXAMPLE 2 | EXAMPLE 3 |
NON-SAFE IMAGECOLOR #800000 | NON-SAFE IMAGECOLOR #800000 | SAFE IMAGECOLOR #660000 |
|
|
|
#800000 TABLECOLOR | #870000 TABLECOLOR | #660000 TABLECOLOR |
Depending on which browser you're using one of the two images to the left will fade into the color of the table.
The other shows a slight border around it.
(If you don't see any difference your screen-settings are wrong. Try change the luminosity or contrast to correct it.
If you still don't see any difference i'm afraid it's not the screen that's the problem *grin* go buy some new eyes)
This is caused by an error in Netscapes color-interpretation.
As you can see: on MSIE image- and table-colors are the same. On Netscape they must be different in order to obtain the same color.
In example 3 the colors are the same for both the image and the table. Still it works on Netscape browsers!
This is because the image is based on one of the 216 colors that Netscape browsers (for some reason) interprets correctly.
Therefore:
If an image should fade correctly into an HTML background the image itself must be based on one of the 216 browser-safe colors. |
This is not done in HTML but in your graphics program.
If the image is not based on a browser safe color - you can't correct it with HTML. |
So to repeat the steps:
- First you need to make sure your image is based on a specific browser safe color.
- Then you need to use that specific color in your HTML document where you specify the background.
When i first decided to make a paragraph about popular colors i kept saying to myself: forget about it. I just couldn't make myself write it, cause the entire idea of such a degree of conservatism was just too plain boring to fit into my head.
What i had been assuming more and more lately simply HAD to be wrong: that the main websites were beginning to focus on just a handful of different colors.
Where is the artistic impression? i asked myself.
Humans simply are way too creative to accept such a degree of conservatism.
After designing tons of pages and surfing zillion others i was of course aware of certain more or less common colors (yep I'm weird enough to dig into the HTML to see the hexcode if i like a color on a page).
As time went by i had a harder and harder time convincing myself that it wasn't true. Then one night, i woke up screaming
HEX #FFCC00!!!!!!!!! (well, not literally - but you get the point) and knew it was time to get back to reality.
I went online and went to ten random choosen sites.
(Well not more random than I knew they were all among the top-25 most visited on the web)
The result, was nothing less than shocking....
Backgrounds
SITE | BACK- GROUND |
HEAD- LINE | MENU AREA |
FORM AREA | TOP MENU |
|
ALTAVISTA |
#FFFFFF |
#FFCC66 |
NONE |
NONE |
NONE |
AMAZON |
#FFFFFF |
#336633 |
#EEEECC |
#EEEECC |
#336633 |
AOL |
#FFFFFF |
#FFCC66 |
NONE |
NONE |
#CC0000 |
CNET |
#FFFFFF |
#FFCC00 |
#FFFFCC |
#CCCCCC |
#000000 |
CNN |
#FFFFFF |
#FFCC00 |
#FFFFCC |
#999999 |
NONE |
EXCITE |
#FFFFFF |
#FFCC00 |
#FFFFCC |
#DDDDDD |
NONE |
MICROSOFT |
#FFFFFF |
#6699CC |
#6699CC |
NONE |
#000000 |
NETSCAPE |
#FFFFFF |
#99CCCC |
#FFFFCC |
#CCCCCC |
NONE |
ZDNET |
#FFFFFF |
#003399 |
#FFFFCC |
#DCDCDC |
NONE |
YAHOO |
#FFFFFF |
#A0B8C8 |
#FFFFCC |
#DCDCDC |
NONE |
- BACKGROUND : Color entered in the <BODY>-tag.
- HEADLINE : Color used for main focus areas.
- MENU AREA : Color used for Menus or Secondary heading-areas.
- FORM AREA : Color used to differ form-area from plain content.
- TOP MENU : Color used for top navigation menu if present.
Since these sites differ in layout it is impossible to set up a perfect set of definitions for the listed items. For example: Some have different kinds of menu's on the same page.
However we have tried to the best of our abilities to identify each of the listed items on each site. If a single item was present twice or more times on the same page we picked the color from the one with the primary focus. If the item was not present on the main page we have identified the item on a primary subpage. |
Text
SITE | TEXT | LINK | VLINK |
ALINK |
|
ALTAVISTA |
#000000 |
#000099 |
#663366 |
#FF0000 |
AMAZON |
#000000 |
#003399 |
#FF9933 |
#996633 |
AOL |
#000000 |
#0000CC |
#660099 |
#CCCCCC |
CNET |
NONE |
NONE |
NONE |
NONE |
CNN |
NONE |
#000099 |
#777777 |
NONE |
EXCITE |
#000000 |
#000066 |
#990000 |
#FF0000 |
MICROSOFT |
#000000 |
#003399 |
#003399 |
#003399 |
NETSCAPE |
NONE |
NONE |
NONE |
NONE |
ZDNET |
NONE |
#333399 |
#0033CC |
#6666FF |
YAHOO |
NONE |
NONE |
NONE |
NONE |
- TEXT : Text-color entered in the <BODY>-tag.
- LINK : Link-color entered in the <BODY>-tag.
- VLINK : Visited-link-color entered in the <BODY>-tag.
- ALINK : Active-link-color entered in the <BODY>-tag.
Of course conclusions from this survey should be made while keeping in mind that it's based on just 10 out of the thousands of websites available. However, if the surveys relevance was based on number of pageviews these 10 sites together represent several hundred million hits per week. Actually all ten sites are among the top-25 most visited sites on the entire net - that's why they were picked for the survey! |
When i climbed up on my chair again i started thinking. (Kinda like a zenbudhist with a mantra.) My mantra was the word WHY?
These similarities were just too obvious to be considered purely coincidential. My first impression was that - yeah - they probably sneaked in on each other when they designed their own pages. Thats why (Of course I knew that these giant websites were designed with the highest degree of professionalism - but sometimes it helps pretending they aren't). Still, the big question was: why?
Im sure that if you went and asked belated Van Gogh or whomever they could talk for days about how different colors appears to be more distant than others etc etc etc and I'm sure there has been analysis made to end up with these colors.
But i'm also certain that almost no matter which colors became standards for main-headers and menu's etc. that the fact alone that they were standards would be enough. The entire web is about minimizing what people need to figure out about your navigation.
For example - in my early childhood on the web (4 years ago) i played with the idea of removing the browsers back-buttons and replace them with my own. Cool!!! - people would say! Yes - very cool, but only from a stupid technical point of view. Not from the users point of view. Why force the user to unlearn what she already knows? Why pretend that users are as interested in my site as myself? Cause they aren't!
By adopting these standards - the visitors are already familiar with your navigation structure before their brain even recognize that the page (finally) showed up. That is the point.
It's not important if the designer likes the colors or not. What matters is that people in general like this way to do things, but most of all, that they're used to this way of doing things.
My final saying here is that no matter how conservative it may seem to adopt standards - it simply makes things easier for the visitor.
After all the page is not designed for the author - right?
Okay, now you know the rules and the standards. No biggy picking colors for your next project - unless, of course, you want to set the standards of the future! Go out there and show, that there has to be more than one way to do it! But while doing so - remember to keep the standards and their benefits in mind.
Henrik Petersen