EchoEcho.Com
COMPLETE TUTORIALS

THIS PAGE HOME  TUTORIALS  DESIGN  ENVIRONMENT  SCREEN COLORS         

EchoEcho.Com
TOOLS & RESOURCES
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

 
  SEARCH THIS SITE

Tell a friend about this site
SUGGEST THIS SITE      

ON THIS PAGE


 SAFE COLORS

 POPULAR COLORS



 

Screen colors

Did you ever notice that many of the leading websites stick to the same few colors? You probably noticed that almost all major sites uses a plain white background these days. But there are several other similarities concerning the colors of these sites.

Close to nobody changes the link-colors.

Almost all major sites uses plain black colors for text.

As if this wasn't enough - they even stick to the same fonts.

Yeah you're right - it's boring.

This page, will teach you that this boring tendency might have one or two very good reasons.

On this page we will assume that you're familiar with the basics of colors in HTML. The issue here is not to explain how to make colors in HTML-documents, but to explain how to choose among the possible ones.

You can learn about HTML-colors here.
 


IN THIS SECTION



ENVIRONMENT

 SCREEN-RESOLUTION

 SCREEN COLORS

 GRAPHIC STANDARDS

 FONTS

 LOADING TIME

 OPERATING SYSTEMS


DESIGN TECHNIQUES

 TABLE CONTROL

 FRAMES CONTROL

 BROWSER CONTROL

 PRECISION DESIGN

 DYNAMIC DESIGN


LAYOUT

 VARIABLE DESIGN

 FIXED 640x480

 FIXED 800x600


STYLES

 NO-SCROLL DESIGN

 FLAT DESIGN

 DEPTH DESIGN

 TABLE DESIGN

 COOL DESIGN

 FUTURISTIC DESIGN



 
Browser safe colors

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 1EXAMPLE 2EXAMPLE 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.



Popular colors

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

SITEBACK-
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

SITETEXTLINKVLINK 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

 





EchoEcho.Com
COMPLETE TUTORIALS
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

EchoEcho.Com
TOOLS & RESOURCES


(c) Copyright 1998-1999 NetKontoret - All Rights Reserved         Last modified on: 08/21/1999 11:24:18




Tell Your Friends About EchoEcho.Com!
Your name and e-mail-address will appear
as "sender" in the mail sent to your friends.

Your Own Name:
Your Own E-mail:

Friends E-mail 1:
Friends E-mail 2:
Friends E-mail 3:

Your Comment:


PRIVACY STATEMENT:
This Tool Sends Out One E-mail To Each Friend
The Information Will Not Be Used For Any Other Purpose.

Click Here!