home
typography
colour
case studies

colour 1 | 2 | 3

Colours (or 'colors' for our American readers) are at most times not given much consideration by some web designers but are in fact extremely important. Colours are used in everything on a site including the backgrounds, borders, links, images, buttons, and text. Colours can make a site more aesthetically pleasing, make the site more useable, attract attention and can even give the viewer a certain 'feel' or emotion.

Computer colour depth:
*A 1-bit image contains pixels which can be either on or off (only black or white)
*A 4-bit image contains pixels which can be any of 16 colours (2x2x2x2=16)
*An 8-bit image contains pixels which can be any of 256 colours (None of the colour depths above allow for smooth photographic quality graphics.)

*A 16-bit image contains pixels which can be any of 65 thousand colours
*A 24-bit image contains pixels which can be any of 16.7 million colours

The properties of colour:
1. Hue. Hue is the name of a colour, such as red, blue, or yellow.
2. Value. Value is the lightness or darkness of a hue (colour). The value of a hue can be changed by adding black or white.
3. Intensity. Intensity is the brightness or dullness of a hue (colour). Pure hues are high-intensity colours. Dull hues are low-intensity colours.

Choosing colours:
There are a few factors to consider when choosing a colour scheme for your website;

Black & white:
First of all it maybe a good idea to create your website in just black and white to begin with before worrying about colours. There are many professional sites out there that only use these two colours, as they are very effective in many ways including readability and contrast.

Attention:
If there were a few words written in the colour red on a page of black text on a white background then many people will have their attention drawn to it, helping them remember the information better. It can be used to get a point across or give a warning. Be aware however that the 'highlighted' text maybe read before what precedes it by the viewer. Actually one of the main elements that should stick out is the title of the page. If the title graphic or text is mostly the same colour as the body then its size should be increased, if its colour is different, and you are wanting it the same size as the body text, then make sure you use a more dominant colour. A dominant colour is any that attracts the most attention.

Colour connotations:
Looking at a colour sometimes gives out a message as they are connected to certain things by the history of their usage. Here are just some examples;
Red: heat, danger, fire, warning, anger, blood, passion, death, hell, love, romance.
Blue: cold, cool, ice, water, sky, sea.
Black: darkness, evil, horror, space, death, night, fear, depression.
Yellow: sun, sand, happy, summer, warm.
Orange: sunsets, warm and cozy.
White: snow, purity, mountains, classic, wedding, peace.
Gold: rich, money.
Green: freedom, envy, calm, luck.
Light green: aliens, eerie.
Grey: dull, boring, neutral, cold, stony.
Pink: happy, girly, wussy, romance, love.
Purple: cool, spooky, royalty.
Silver: futuristic, money.
Brown: earth, mud, history, old.

Complimentary and Intermediate colours:
Complimentary colours are colours that are across from each other on the colour wheel below. Violet and yellow are complimentary, blue and orange are complimentary, and red and green are complimentary. Colour Complements are colour opposites. These colours contrast each other in the most extreme way possible just as black and white do. They also help to make each other more active.
There are six intermediate colours, red-orange, red-violet, blue-violet, blue-green, yellow-green, yellow-orange. These colours are created by mixing a secondary colour along with a primary colour. Lighter and darker versions of the same colour can give the same effect and work well, for example, dark green text goes well with a light green background.

Hex guide:
Colours in HTML documents are entered in hexadecimal form. Follow the link here to see 276 colours and their hexadecimal equivalents.

The visual aspect:
There are obviously some colour schemes that are easy on the eye, such as black on white and others that aren't, such as yellow on white. Follow the link here to see the colour test screen.

Links:
If you want anymore information concerning the large subject of 'colour' I would suggest going to at least one of the links below.
Color Matters
Colour Perception

Contact:
To get in touch with the writer of the colour section then you can e-mail Marc Brownett


top |1 2 3