using colours l.
Skip this Video
Loading SlideShow in 5 Seconds..
Using colours PowerPoint Presentation
Download Presentation
Using colours

Loading in 2 Seconds...

play fullscreen
1 / 25

Using colours - PowerPoint PPT Presentation

  • Uploaded on

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)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Using colours' - ryanadan

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
using colours

Using colours

(c) John Dempsey, University of Central Lancashire

  • 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
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 works5
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 works6
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
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?
colour values
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
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

Analog colours are commonly used

as the “backup” colour.

Analog colours are close to the

original primary colour.

complementary colours
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

Split complementary can give you

the same highlighting abilities as

complimentary, but the contrast

between colours is not as high.

triad colours
Triad Colours

Three colours evenly distributed over

the colour spectrum can give an

colourful, yet balanced colour scheme.

some considerations
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 considerations20
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 considerations21
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 considerations22
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
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.
  • 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.
  • Prism picture -
  • Colours on the Web -