Please note: Every link on this page opens in a new window. If your "Pop-up killer" is too efficient it can also stop new windows. When this happens, please press "Ctrl" and click on the link you want.

Importance of Colours

A website differs in one aspect completely from all other media. That is: an internet surfer decides him/herself which site or page to visit and how long to stay there. If the website or webpage doesn't feel comfortable - or even worse, if it feels uncomfortable - then the next site is only one click away.

The background colour is the first thing your visitor will see on your page, this sets the basic mood in the visitor's mind. Any effect of a colour or colour combination depends on the visitor's ability to see the colours. The interpretation of that/those colours (= emotion) depends on the emotional and cultural context.

What is important is the total effect of all colours on each page, including your background. There has been some research indicating that a page with some kind of coloured background is perceived as containing more information than a page with white background. The background together with your logo is your internet ID and both should therefore be the same on every page of the same site.

If you have two or three websites (different subjects) that are interlinked, it's better to have a differently coloured background on each site. Otherwise some visitors can get confused as to which website they are on.

When you make a website or webpage for the Web you are in fact working in a multicultural environment where you never now in advance from where your visitors will come. As already (2007) more than 75% of internet users are non-native English speakers, there sure must be cultural differences too.  English is the mother tongue for only 7-8% of the world population.

Hexadecimal Code

Colours in the nature and on printed materials (books, magazines etc.) are reflected colours. To reproduce these colours in the printing process they are described by the CMY or CMYK code. A computer, however, uses a different system (RGB) called the hexadecimal code, which is based on the number eight (8). This system handles (2 x 8)² = 16 x 16 = 256 colours. Each character in the code can take 16 values, i.e.: 0-9, A-F.

The primary colours with reflected light are red, yellow, and blue, which should be familiar to most people already from primary (elementary) school. For more info on colours and the printing process see desktop publishing at about.com. With projected light (computers), however, the primary colours are red, green, and blue.

There are additional codes (except for hexadecimal) you can use to indicate to the browser what colour to use. With the increasing browser support of CSS ( Cascading Style Sheets ) the number of possible colour code variations increases as well. See overview of colour codes with CSS.

Computer differences

There are different systems for showing colour on the screen. Mobile phones used one bit per pixel (8 bits = 1 byte). Pixel is short for "picture element", which is like a very small square on the monitor screen.

Next level was 8 bits per pixel. When 8 bits of colour code is allotted to each pixel, the result is maximum 256 colours.

Some computers are still working with 16 bits/pixel although newer computers use 24 bits/pixel - showing "true" colours. 24 bits/pixel allows 16.777.216 colours (= 8⁸ = the 8^th power of 8). Of course that one has now developed into a 32 bit system, which gives 4 billion (4.000 million) colours and colour shades.

Percent of users per colour system, (2006 -2008) Don Pedro's Global Shipping Job Directory Colour Systems Percentage usage 2006 2007 2008 32 Bit 24   " 16   " Other 80.2 % 4.6 % 14.5 % 0.3 % 84.7 % 3.5 % 9.1 % 2.4 % 85.3 % 3.9 % 7.9 % 2.6 %

Because of different Operating Systems (Windows, Mac, PC, Unix, Linux, Web-TV) different browsers (and browser versions) show the colours slightly differently.

On many websites giving advice on the use of colours you will see the mention of "browser safe" colours. This is an expression still hanging around since the late 1990's. It's not a question about browser safe but monitor safe colours.

At the end of the 90's most monitors were still working with a 8-bit colour system, which allows only 256 colours. This system, combined with differences in computer systems and browser versions, produced the "Browser safe system", i.e. 216 colours.

With less than 1.0 % of Internet users' monitors now using a 8-bit system, one can in most cases disregard this completely. But, of course, if you have 10.000 visitors/day to your website, just one half percent only, means about 18.000 visitors per year. So ? In this version 8 Bit would be at 0.2 % only, 8 Bit system has therefore been deleted here.

Some handheld devices could be using 8 Bit systems, but then there are other new systems also which are increasing in numbers. All new computers, however, nowadays are 32-Bit system.

Most computer monitors will make your photos slightly more blue than the original. This bluishness doesn't apply to computer generated pictures. You should consider checking your pictures in a lap top as well, because it is using a Liquid Crystal screen, which tend to be brighter than CRT (Cathode Ray Tube). See Don Pedro's How to Change my Pictures and Photos.

The individual visitor may have a reason to change brightness and contrast on his/her monitor, thus changing the overall effect you try to produce with your colours. All colours on the screen, including your pictures and background etc, as well as colours surrounding and behind your visitor's computer, will affect how your website colours are perceived.

You have very little or no control of these effects. To neutralize negative effects from these differences, visit as many different internet places as possible; such as internet cafés, public libraries etc. Try all different combinations ( including different browsers and versions ) available. Note down the big obvious differences (if any) and try to change those. When you check your pictures you can put the original picture or photo beside the monitor and compare. More about browsers, see Internet Web Browsers.

Effects of Colour Blindness

Every individual perceives colours slightly differently. In North-America and Western Europe it is estimated about 8 % of males and 0.5 % of females are somewhat colour blind (red/green). In the Maritime Sector this is less, because a seaman may not be colour blind. There are also sight-impaired people ("half-blind") surfing the internet. These visitors will perceive picture brightness (brilliance) as well as colours differently. Almost 10% of your visitors could be colour blind.

You can check yourself for possible colour blindness online for free. You can also check your webpages online for colour blindness effects with different colour filters.

A colour blind person described a reddish-brown dog as greyish-brown. Try an experiment: Take a screen shot of anyone of your pages and take it to a picture handling program. Then change this "shot" to "grey scale" - is it still readable?  Some colour-blind surfers see your pages roughly like this. [You take a shot by first pressing "Prt Scrn" and then "Ctrl"+"C", now you have a copy you can paste into "Paint".]. Very few people, however, are completely colour blind. Mainly they have difficulties in making difference between red and green under low light (dawn or twilight).

You can check your webpages online for colour blindness effects with different colour filters.

Light covers a broad spectrum of many wave-lengths. What we see as colour is reflected light; each colour different wave-length. Different materials (including paints) reflect a certain (specific) combination of wave-lengths, the others are absorbed (not reflected). Black is then no light at all and white consists of all wave-lengths = full amounts of red, yellow, and blue (reflected light).

Inside at the back of an eye (on the retina) there are light receptors (light sensitive cells) reacting to certain wave-lengths. These are slightly different in efficiency between different people, which is why two persons can disagree strongly about a certain colour - and both are right! Their receptors are simply slightly different and they just see the colours differently.

A colour blind person (red/green) either doesn't have those receptors or they can be more or less defective. For a fully colour blind person the world certainly looks dull (greyish).

Women perceive colours differently - especially different shades - from men. The reason for this is the difficulty to see difference between red and green is genetic. The faulty gene is located on the X chromosome. Men have only one X chromosome while females have two X chromosomes. Worldwide about 7% of males and only about 0.4% of females are red / green colour blind. Generally men tend to favour blue more often than women, while women often choose yellow instead of blue.

There are some regions and countries - even a few communities - with extra high occurrence of colour blindness. Generally it's about 8% for Caucasian males, while only 4-5 % for African and Asian males.

A colour blind person often sees green as yellow (yellow = red + green, projected light), thus green text on yellow background can for some people seem like yellow on yellow (= "invisible" text). Colour blind people see correctly: black and white, all shades of gray, blue, and yellow. Definitely don't use colour as a means of navigating your site (= Menu).

An experiment: Get the hexadecimal code for the colours you are planning to use, either from about.com or htmlhelp.org. The colours are in the order "RGB". Most colour blind people cannot see red. Delete "red" in the code = make the first group "00" (double zero) and you will get a new colour. Is it offensive or not, negative or positive ? See examples below (note these are projected colours):

Example #1:

"Pink" Medium blue Dark blue "Pink" "#D269EE" "no red" "#0069EE" "no red" "no green" "#0000EE"

Example #2:
If you have medium gray background with navy blue text it looks quite nice, doesn't it ? But if your visitor cannot see red it would look like this, still readable - right ? And if your visitor can see neither red nor green, the result would be like this, in other words an invisible text!

In fact for most colour blind people the red and the green colour range is moved towards blue-yellow. Be very careful when using colours that contain red and/or green. In other words, there are different kinds of colour blindness!

Cultural - Psychological Differences

This is the "catch-all" of colour differences. Computer differences, differences in colours and medical differences do come in to play also within each different culture. So how to do? Unless you target your web site very strictly at a certain small homogeneous group - like German women between 18-25 years old and living in southern Germany - you most probably end up with just trying to avoid aggressive colours and colour combinations.

Colours do give different feelings in different cultures. This is because every individual judges the colour scale according to his/her own "built-in" scale, which is based on familiar colours in the childhood. Try to imagine what a child in the Sahara desert, in an Eskimo igloo, or in the tropics respectively, gets accustomed to!

To the right are shown three small pictures; from Sahara desert, from Lapland, and a tropical view. The landscape view from Lapland comes close to the colours an Eskimo child will experience at home. Click on the small Lapland picture to get a full screen version (22 KB). The other two small pictures give an indication of the differences.

Different colours do give rise to different feelings and emotions depending on traditions in each culture. Some colours and colour combinations will feel "comfortable" while others are not so. For instance for Westerners black is the colour for mourning, while in the Chinese and Japanese (Korean ?) cultures the colour of death is white.

Bright red has been shown in US to cause aggressiveness and a rise of blood pressure. In the Chinese and Korean cultures red is the colour of happiness and prosperity, while the colour of prosperity in India is yellow.

Cultural responses to a certain colour are learned behaviour. It means that it doesn't matter what name somebody gives a colour. If that colour has been present in a safe environment in a persons childhood it will later in his/her life be associated with safety and thus cause a feeling of safety and comfort. In this respect many colours are associated with specific emotional responses among most people belonging to the same culture.

Most professions have their own "subculture" with their own jargon ("language") or terminology, for instance "psychologist speak", as well as their own colour preferences. Most engineers will by force be accustomed to dark "greasy" overalls during their training, while medical doctors are surrounded mostly by white and light blue or green.

Furthermore, some marketing research from USA shows that working class people (people with only basic schooling) tend to prefer simple clear colours, such as: red, green, and blue (the primary colours!). On the contrary, more highly educated people (university level) tend to choose more complex colour shades: azure (sky blue), mauve (pale purple), and "taupe" (light yellowish brown?).

An example: In the 1970's and the 80's you could see in some Russian countryside villages houses painted in pink and light blue. Naturally, those who grew up in those villages, would regard these colours as normal house colours. For them, even later in life, these two colours would be associated with home, friendliness (hopefully), and safety.

Below is presented a table of colour associations in different cultures or regions of the world. The table has been compiled from many sources, the most important ones being about.com and New Architect Magazine.

There are a lot of other sources I have utilized, in combination with my own experience from going around the world as ship officer for some 40 years, as well as working with people from many different cultures. Learn more about intercultural awareness.

Colour Table

If you disagree with something in the colour table just ignore what I say and follow your own opinion or intuition ("gut feeling"). Different shades of the same colour can have different meanings. In some instances my eyes do not agree with what the computer shows for a certain hexadecimal code. In such cases I have changed the code to get approximately the colour I associate with that colour name.

Legend:

1. As, especially on a 800 x 600 screen you cannot see the full table, the column headings are repeated about in the middle and at the bottom of the table.
   
   
2. In the "Colour column" the background is in that colour to make the  colour name standing out better (not print version). For each colour the hexadecimal code is given (#rrggbb).
   
   
3. Different countries or regions or cultures:
   1. When no region indicated, the meaning should be more or less valid in most cultures.
      
   2. ME = Middle East.     NE = North Europe.
      
   3. Saudi = Saudi Arabia
4. "Clashing colours" doesn't mean you cannot or shouldn't use them, just be careful if you put both on the same page.

Skip colour table

Colour Combinations

Generally colours that go well together have some colour shade in common.

When you are using the hexadecimal code, you have three groups of characters, each consisting of two symbols, i.e. like "blue" = "#0000FF". In the hexadecimal system (and with CSS) you can use "shorthand", and instead write "#00f". This is called a "triad". Usually different transformations of a triad all should make up good combinations, because they all have something common.

Colour triad transformation
Lets try it. As starting point I'm using Violet. The transformations are below in a table:

"#9400D3" "#94D300" "#00D394" "#0094D3" "#D30094" "#D39400"

At least theoretically these colours should go well together because they all have common elements.

How to Choose a Combination?
First you choose one main colour, for instance as your background. Then I would suggest you choose only two additional colours, a combination of three usually works best. Don't use too many different colours - it can be very disturbing.

Your colour combination should express the web site's personality and purpose or intent - same as a sales representative shows his/her personality with kind and colour of dress. I.e. on an informative site the colours should be simple and not distracting, it's your information people want - not the colours. The colours should match your visitor's values, not your own.

When surfing on the Net one often gets to one of those big company sites. Because these organizations can afford and willingly pay for research there are certain similarities. For instance certain colour combinations are more common than others.

Not only do certain companies use certain colour combinations, but in some industry sectors one or two colours can be more common than in others. For instance in the computer sector (IT) blue is very common, examples: IBM and Microsoft. When you plan your own colour combination try to start with the most common colours in your sector so that people will (subconsciously ?) recognize what business you are in. Then by adding other colours that don't clash too badly with your primary colour you provide an individual ID for your site.

For instance, if you were selling tools to male engineers, I don't think you would use pink on your pages. But what if you are selling soap for baby girls, say in Northern Europe ?

Colour Trends in 2006 and 2007

I have made a very short summary of three reports from the Color Marketing Group (US), one for 2005, one for 2006, and one for 2007. The main trends can be summarized thus:

"Consumers desire comfort, stability, and security, but optimistically yearn for bright and fresh signs of a better world to come. Special effects (Flash!) will diminish; colours will appear to be infused with a light from within".

We can expect people to feel comfortable with restful geometric patterns, textures, and high-tech metallic colours, for instance in web page backgrounds.

There will probably be more nature based colours. Cultural influences from Asia can soften the colours both in North America and Europe. See Adobe Photoshop CS (tutorial) for advice on how to make a "fire-rust" background.

Specific colours could be seen more in 2006-2008 with a slightly changing trend:

• warm, clear, and bright
  
• reddish orange and
  
• yellowish
• more complex but restful textures and surfaces - surfaces that look complex
  
• clean and simple (may be feminine) colours as number of female decision makers increase globally.

Metallic blue as well as plain white and black were already in 2005 growing less common on new web sites. During 2006 colour sophistication among consumers was increasing. Colours with "character" are replacing trendy pop colours.

The most common colour combinations on the Internet were (2004-2005):

- Red-Yellow-White - Red-Gray-White - Yellow-Gray-White

- Blue-White - Blue-Orange-White

In 2006-2007 the most important colours being red and blue, and mixtures of these. Red hues and colour shades are getting stronger. Warm "reds" have been popular for many years and are now slowly turning into "classics".

Blues, especially inspired by the environment are leading, together with the reds. A mixture of blue and green, inspired by "oceanic" colour shades will in many instances be the top choice. These can sometimes be combined with brown or just tinted with brownish hues.

There could also be a movement from yellowish green to blue based green. In other words, the trend towards more "natural" (environmental) colours and colour shades continues.

Summary : When you choose your colour combination keep in your mind you a striving for an attractive design that instills trust and confidence in your website, while at the same time reducing your visitors anxiety. If your visitors are coming from many different cultures this can be very difficult. May be you end up with avoiding causing anxiety - it's always the effects in your visitor's mind that should be the deciding criteria.


Languages available: ( Arabic ), ( Chinese ), Deutsch, Español, Français, Icelandic, Italiano, ( Japanese ), ( Korean ), Nederlands, Português, Pycckий.