Using colours

1
Using colours
2
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

3
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

4
How colour works
5
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?

6
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.

7
How colours work CMYK
8
How colours work - RGB
9
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?

10
Primary Colours
11
Secondary Colours
12
Tertiary Colours
13
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)

14
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.

15
Analog Colours
Analog colours are commonly used as the backup
colour. Analog colours are close to the original
primary colour.
16
Complementary Colours
Most commonly used as the highlight
colour. Complementary colours are direct
opposites from each other, and therefore
stand-out very well.
17
Split Complementary
Split complementary can give you the same
highlighting abilities as complimentary, but the
contrast between colours is not as high.
18
Triad Colours
Three colours evenly distributed over the colour
spectrum can give an colourful, yet balanced
colour scheme.
19
Some considerations

• Dont 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

20
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

21
Some considerations

• There are still lots of computers that arent
  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

22
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

23
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.

24
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.

25
References

• http//en.wikipedia.org/wiki/Color
• Prism picture - http//school.discovery.com/clipar
  t/clip/prism4c.html
• Colours on the Web - http//www.webwhirlers.com/co
  lors/introduction.asp