COLOUR

a look at basic colour theory, meaning and colour schemes for web
(updated feb 2014)

Transcript

3. ‣ yellow/red light: vibrant/stimulating ‣ can portray warmth as well as danger and risk ‣ high arousal colours, especially when used in saturated shades ‣ perceived to be closer to the viewer = enhances perception of perspective ‣ white/blue light: cool/calm ‣ can portray tranquility ‣ low arousal colours, especially when used in pastel shades ‣ perceived to be further away from viewer = enhances perception of perspective cool warm chromodynamics
4. ‣ associations:
 fire / blood / energy / war / danger / passion / desire / love ‣ strong impact colour with high visibility ‣ expression of urgency / alert / error RED
5. ‣ associations:
 sunshine / joy / health / enthusiasm / happiness/ creativity ‣ strong impact colour with high visibility ‣ expression of strength / endurance ORANGE
6. ‣ associations:
 sunshine / joy / happiness / intellect / energy / caution / jealousy ‣ effect depending in additional colours ‣ expression of pleasant and cheerful emotion, used for highlights;
 if overused or in dull shades - can become unappealing YELLOW
7. ‣ associations:
 nature / growth / hope / harmony / safety / fertility / money ‣ calm impact, suggesting experience ‣ expression of restful and calm emotions;
 also used for eco / green products GREEN
8. ‣ associations:
 sky / water / depth / loyalty / trust / truth / intelligence / wisdom ‣ calm and tranquil impact ‣ expression of depth, expertise and stability BLUE
9. ‣ associations:
 royalty / luxury / ambition / nobility / creativity / mystery ‣ impact varies with hues ‣ expression of nostalgia / romance PURPLE
12. hellogeri.com Geri Coady Colour Accessibility Five Simple Steps
13. hellogeri.com/about full colour vision
14. hellogeri.com/about Deuteranopia (green-blindness) (common)
15. hellogeri.com/about Protanopia (red-blindness) (rare)
16. hellogeri.com/about Tritanopia (colour vision deficiency for blue tones) (very rare)
17. An explanation of colorblindness An explanation of colorblindness is a post on The Hickensian photo courtesy of David Shrigley
18. yellow red blue orange purple green yellow-orange red-orange red-purple blue-purple blue-green yellow-green
20. ‣ effect and interpretation of colour emphasized or changed by values ‣ good colour schemes combine carefully selected colours by shade, tone and brightness for maximum impact ‣ screen display will influence decisions due to nature of light used ‣ pure colour value ‣ colour value changed towards shade of grey, affecting chroma ‣ colour value changed by addition of black/white
24. colour combinations
26. ✔
27. colour scheme combination of tones and shades within the same colour / hue
30. colour scheme combination of adjacent colours
33. colour scheme combination of 2 colours from opposite sides of the colour spectrum combination of 4 colours (each pair adjacent to each other) from opposite sides of the colour spectrum
37. colour scheme combination of 3 colours evenly spaced around the colour wheel
41. colour scheme combination of colours, often 2 groups of similar hues, chosen specifically from the colour spectrum
45. saturation brightness hue
47. colours in code caniuse.com
48. colours in code color: #FFB000; color: rgb(255,176,0); HEX: RGB: ! NOTE: HSB != HSV || HSL cannot be used in code
49. colours in code COLORS by mattpatenaude.com HSL COLOR PICKER
 by Brandon Mathis hslpicker.com
50. Chris Coyier - HSLa Explorer css-tricks.com/examples/HSLaExplorer
51. image credits: • photo: Geri Coady, by Jeffrey Zeldman on Flickr • photo: ORANGE : pumkin on leaves, by pink sherbert on Flickr • photo: YELLOW : autumn leaves, via Flickr • photo: GREEN : Photomicrography, via The Big Picture (Boston.com) • photo: BLUE : waves, by somebody_ , via Flickr • photo: PURPLE : flower close up, by cobalt123 via Flickr • photo: colour splash, via theinspirationgrid.com • photo: coloured plastic, via Frank Chimero on gimmebar.com • photo: “image the green is red” by David Shrigley, via “An explanation of colorblindness” by Jon Hicks • Life, magazine illustration by Coles Phillips, 1927 site references • An explanation of colour blindness, Jon Hicks • Geri Coady, website - hellogeri.com • colour bookmarklet - wearepandr.com/labs/colour_bookmark • Symbolicons - symbolicons.com • Adaptd - adaptd.com • Kaleidoscope App - kaleidoscopeapp.com • Gift Rocket - giftrocket.com • You Know Who Design, Sarah Parmenter - youknowwhodesign.com • duoh! - duoh.com • Veerle’s blog - veerle.duoh.com
52. Prisca Schmarsow prisca@eyedea.eu ! graphiceyedea.co.uk @prisca_eyedea