(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

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 Colours Analog colours are commonly used as the “backup” colour. Analog colours are close to the original primary colour.

Complementary Colours Most commonly used as the highlight colour. Complementary colours are direct opposites from each other, and therefore stand-out very well.

Split Complementary Split complementary can give you the same highlighting abilities as complimentary, but the contrast between 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 Prism picture - c.html c.html Colours on the Web - n.asp n.asp