1. PBA Front-End Programming Colors – Theory and Practice

2. Colors, theory & practice Why are colors important…?

3. Colors, theory & practice Vision is (usually) the ”strongest” human sense – primary source of information Humans are good at distinguishing colors (~10 million hues) Colors and feelings are closely related On a website, colors is the first thing we notice – first impression is important!

4. Colors, theory & practice What are colors actually? Physically: Electro- magnetic radiation in a narrow wavelength interval Actual colors exist only in our brains…

5. Colors, theory & practice Primary colors: – Yellow – Blue – Red

6. Colors, theory & practice Secondary colors: – Green – Orange – Violet

7. Colors, theory & practice Tertiary colors: – Yellow-orange – Red-orange – Red-violet – Blue-violet – Blue-green – Yellow-green Forming the Color Wheel

8. Colors, theory & practice Complementary colors: Colors opposite each other on the color wheel

9. Colors, theory & practice Analogous colors: Colors next to each other on the color wheel

10. Colors, theory & practice Warm colors Cool (cold) colors

11. Colors, theory & practice Tint – adding white to a pure color

12. Colors, theory & practice Shade – adding black to a pure color

13. Colors, theory & practice Tone – adding grey to a pure color

14. Colors, theory & practice How do we define a color in quantitative terms (using numbers) We use color models Most widespread color model in the context of computers is RGB Additive color model, uses Red, Green and Blue as additive primary colors (why not Yellow instead of Green…?)

15. Colors, theory & practice Typical representation in RGB is to use 24 bits 24 bits = 3 bytes One byte for each component color Approx 16.7 millions hues possible, about what the human eye/brain can differentiate www.colorpicker.com https://kuler.adobe.com (Flash) https://kuler.adobe.com

16. Colors, theory & practice How are colors relevant with regards to Web Design? Usability: Good color choices make the website easier to use (to read, to navigate,…) Convey emotions: Colors are strongly associated with human emotions

17. Colors, theory & practice How does color affect usability Text: If a website is text-rich, colors should ”support” the user in reading text Avoid choices that make it hard to read the text; the user will tire and go away…

18. Colors, theory & practice These are (almost) complementary colors… You could then assume that they would produce high contrast…..and make the text easy to read… …but it doesn’t look like it!

19. Colors, theory & practice Black and white is often a good choice for text Can appear somewhat ”harsh” on the eye Can be softened with e.g. beige background, grey text

20. Colors, theory & practice Black and white is often a good choice for text Can appear somewhat ”harsh” on the eye Can be softened with e.g. beige background, grey text

21. Colors, theory & practice Black and white is often a good choice for text Can appear somewhat ”harsh” on the eye Can be softened with e.g. beige background, grey text …And even in reverse, maybe…

22. Colors, theory & practice Also, colors should not surprise the user On a website, I expect that this is a link ”Wrong” colors may also confuse a user who must make a choice: Do you really wish to delete your user profile? YesNo

23. Colors, theory & practice Fact: Colors invoke feelings! Why…? Which feelings? Depends on – Culture – Personality – Mood – …?

24. Colors, theory & practice

30. You can find more color symbolisms at: http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm You can probably find other interpretations elsewhere as well…

31. Colors, theory & practice Now I have to design a website, including choosing colors…how do I start? In many situations, the colors for the website may be predetermined Visual corporate identity

32. Colors, theory & practice

34. The obvious colors might also be ”taken” by somebody or some- thing you do not want to be associated with…

35. Colors, theory & practice If choice of colors is ”free”… …start by finding adjectives that match the theme of your website Find base color(s) that match those adjectives (only two or three colors) Decide what kind of color scheme you will apply

36. Colors, theory & practice Color scheme – a palette of colors to apply to your wesbite Given the base color(s), find additional colors to apply A number of standard color harmonies exist for generating color schemes

37. Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com

38. Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com

39. Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com

40. Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com

41. Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com

42. Colors, theory & practice (taken from www.tigercolor.com )www.tigercolor.com

43. Colors, theory & practice