1 / 25

Using colours

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)

ryanadan
Télécharger la présentation

Using colours

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using colours (c) John Dempsey, University of Central Lancashire

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

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

  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/clipart/clip/prism4c.html • Colours on the Web - http://www.webwhirlers.com/colors/introduction.asp

More Related