(c) John Dempsey, University of Central Lancashire

Using colours

Introduction

A lot of effort is required to design and develop an attractive looking website

Much of the effort can be removed by selecting colours that work with each other (rather than against each other)

This lecture will talk about the theory of colour, and will propose strategies useful in deciding colour schemes for websites

How colour works

A complete discussion of “how colours works” is beyond this lecture, but an interesting article on “wikipedia” can be found in the reference section of these notes

All colour comes from the light (sun, bulb etc) Within a light source are a range of different

colours – which can be seen when looking at a rainbow or a prism

How colour works

How colour works

When light shines on an object, that object will absorb certain colours from the “light spectrum” and will reflect other colours from the light spectrum

What colour does a red apple reflect? What colour does a white shirt reflect? What colour does a black coat reflect?

How colour works

Different colours use “primary colours”. These primary colours can be mixed to make an assortment of other colours.

There are two main “standards” of how colours are mixed. RGB – Red, Green, Blue. Used by computers and

TV screens. CMYK – Cyan, Magenta, Yellow, Key (Black).

Used for printing, drawing and painting.

How colours work – CMYK

How colours work - RGB

How colours work

As we are working with computers, and web pages, we will only concentrate on RGB colours (however, photoshop can also work with CMYK colours)

An individual RGB value (for example Red) can have a value between 0 and 255. Every colour is made up of three values between 0 and 255.

Question: What would the RGB value be for yellow?

Primary Colours

Secondary Colours

Tertiary Colours

Colour Values

There are different ways to represent an RGB value on the web

You can use individual decimal values rgb(255, 255, 0)

You can use hex values #FFFF00 (the preferred method)

Combining Colours

A common rule used in combining colours Primary colour. Main colour of the page. Will

occupy most of the page and set the tone for the entire page.

Backup colour. Normally close to the primary colour, used to “backup” the primary colour.

Highlight colour. Used to emphasise certain parts of the page

Choice of colour is yours. Your perception of colour combinations is yours alone.

Analog ColoursAnalog colours are commonly usedas the “backup” colour.

Analog colours are close to theoriginal primary colour.

Complementary Colours

Most commonly used as the highlight colour.

Complementary colours are direct opposites from eachother, and therefore stand-outvery well.

Split Complementary

Split complementary can give youthe same highlighting abilities ascomplimentary, but the contrastbetween colours is not as high.

Triad Colours

Three colours evenly distributed over the colour spectrum can give an colourful, yet balanced colour scheme.

Some considerations

Don’t forget that not everybody sees colour the same way as you Colour blind people Quite common to see green and blue as the same

colour You should try to avoid using colour to

convey information to your viewer If this is not possible, then you should provide

an alternative

Some considerations

Example Blue text on a green

background may not be readable by some colour blind people.

This should be avoided, but if not possible, a text link separate (but close by) should be provided

Some considerations

There are still lots of computers that aren’t able to display 16.7 million colours Some computers can still only display 255 colours!

A suite of colours, collectively known as “web safe colours” is available. These colours should be displayed on different equipment the same way, no matter their spec.

There 216 web safe colours Not everybody uses web-safe colours – this is your

choice, and should be considered before designing

Some considerations

Just like the rest of our body, an eye can get tired. An eye gets tired by working too hard.

Bright or highly contrasting colours, or perhaps too many colours in one place can all tire the eye

Tired eyes lead to headaches

Colour Wheels

You can pick up colour wheels from art shops You can pick up “colour palettes” from DIY

stores (in the paint department) Adobe Photoshop provides “colour palettes”

by clicking on the “custom” button in the colour picking screen.

Conclusion

Choice of colour is a personal decision Any design process is about attracting

customers (or page viewers in the case of the web)

Remember to consider the people that will be viewing your website – choose colours based on what would appeal to them.

References

http://en.wikipedia.org/wiki/Color Prism picture -

http://school.discovery.com/clipart/clip/prism4c.html

Colours on the Web - http://www.webwhirlers.com/colors/introduction.asp