1. CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008

2. CS-10 2008 - Session 2 2 What is Color Theory? Premeditated use of color

3. CS-10 2008 - Session 2 3 Before we begin Binary is a number system Based on using only 1’s and 0’s (10 base 2) In binary 14 looks like this 1110 Hexadecimal is a number system Based on using 0 – F to represent 0 – 15 Hex is used to represent colors using 6 digits

4. CS-10 2008 - Session 2 4 What does it look like? We denote hex by placing a pound sign (#) in front of the number. Black = #000000 #333333 #666666 #999999 #CCCCCC White = #FFFFFF

5. CS-10 2008 - Session 2 5 Dissecting a hex color FF0000 Alternatively, you can specify the red (R), green (G), and blue (B) intensities directly }}} Red intensity Green intensityBlue intensity #

6. CS-10 2008 - Session 2 6 The Color Wheel

7. CS-10 2008 - Session 2 7 Why is it in a circle? To show the relationships of the colors

8. CS-10 2008 - Session 2 8 Color Schemes are A collection of colors We see colors together all the time

9. CS-10 2008 - Session 2 9 Defined color schemes Primary Colors red, blue, yellow The three colors that make every other color

10. CS-10 2008 - Session 2 10 Defined color schemes Secondary Colors green, purple, orange The first three colors made from red, blue, & yellow

11. CS-10 2008 - Session 2 11 Defined color schemes Tertiary Colors red-violet, red-orange, yellow-green, yellow-orange, etc The mixture of one primary color and one secondary color

12. CS-10 2008 - Session 2 12 Defined color schemes Analogous Colors blue-violet, purple, red-violet Colors adjacent to each other

13. CS-10 2008 - Session 2 13 Defined color schemes Complimentary Colors red, green Colors across from each other, opposites

14. CS-10 2008 - Session 2 14 Defined color schemes Split-Complimentary Colors red-violet, red-orange, green A color and the two colors on either side of its compliment

15. CS-10 2008 - Session 2 15 Defined color schemes Triadic Colors red-violet, yellow-orange, blue-green 3 colors evenly spaced from one another

16. CS-10 2008 - Session 2 16 Defined color schemes Monochromatic blue, blue with white added (tint), blue with black added (shade) A single color and its tints and shades

17. CS-10 2008 - Session 2 17 What did we learn? What other cues did we gather from those schemes? How many colors? 1 - 4

18. CS-10 2008 - Session 2 18 More terminology Hue – color Saturation – hue purity (tainted by white or black) Shade – adding black to a color Tint – adding white to a color

19. CS-10 2008 - Session 2 19 Color Color is so strong it can evoke feelings http://www.color-wheel-pro.com/color-theory-basics.html

20. CS-10 2008 - Session 2 20 Color meaning What colors evoke hunger? What colors evoke depression? Happiness? http://dutchboy.com/colors/choose/meaning/meaning/

21. CS-10 2008 - Session 2 21 Logo Fail

22. CS-10 2008 - Session 2 22 Logo Fail

23. CS-10 2008 - Session 2 23 A classic misunderstanding Of color use on the web

24. CS-10 2008 - Session 2 24 But you said To pick a color scheme Why is there a problem? –Readability ( contrast check )contrast check –Usability –Accessibility Website Develop Color Galleries –http://designshack.co.uk/http://designshack.co.uk/ –http://www.cssclip.com/http://www.cssclip.com/

25. CS-10 2008 - Session 2 25 Colorscheme picking Adobe Kuler Colour Lovers Color scheme generator 2 See Gimme, gimme section for more color links

26. CS-10 2008 - Session 2 26