COLOUR

 COLOUR

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

A1212e71e1f99cd5b98bb673dca73580?s=128

Prisca Schmarsow

March 12, 2012
Tweet

Transcript

  1. 1.
  2. 2.
  3. 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. 4.

    ‣ associations:
 fire / blood / energy / war /

    danger / passion / desire / love ‣ strong impact colour with high visibility ‣ expression of urgency / alert / error RED
  5. 5.

    ‣ associations:
 sunshine / joy / health / enthusiasm /

    happiness/ creativity ‣ strong impact colour with high visibility ‣ expression of strength / endurance ORANGE
  6. 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. 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. 8.

    ‣ associations:
 sky / water / depth / loyalty /

    trust / truth / intelligence / wisdom ‣ calm and tranquil impact ‣ expression of depth, expertise and stability BLUE
  9. 9.

    ‣ associations:
 royalty / luxury / ambition / nobility /

    creativity / mystery ‣ impact varies with hues ‣ expression of nostalgia / romance PURPLE
  10. 10.
  11. 11.
  12. 17.

    An explanation of colorblindness An explanation of colorblindness is a

    post on The Hickensian photo courtesy of David Shrigley
  13. 19.
  14. 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
  15. 21.
  16. 22.
  17. 23.
  18. 25.
  19. 26.

  20. 28.
  21. 29.
  22. 31.
  23. 32.
  24. 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
  25. 34.
  26. 35.
  27. 36.
  28. 38.
  29. 39.
  30. 40.
  31. 41.

    colour scheme combination of colours, often 2 groups of similar

    hues, chosen specifically from the colour spectrum
  32. 42.
  33. 43.
  34. 44.
  35. 46.
  36. 48.

    colours in code color: #FFB000; color: rgb(255,176,0); HEX: RGB: !

    NOTE: HSB != HSV || HSL cannot be used in code
  37. 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