1. Week 7 Colour and Typography

2. The three types of cones

3.  http://www.toledo-bend.com/colorblind/Ishihara.asp http://www.toledo-bend.com/colorblind/Ishihara.asp  http://webexhibits.org/causesofcolor/2.html#vissamp http://webexhibits.org/causesofcolor/2.html#vissamp  http://www.lighthouse.org/accessibility/effective-color-contrast/ http://www.lighthouse.org/accessibility/effective-color-contrast/  http://endorseyou.wordpress.com/2007/09/28/remember-the- color-blind-in-your-design/ http://endorseyou.wordpress.com/2007/09/28/remember-the- color-blind-in-your-design/  http://colorfilter.wickline.org/ http://colorfilter.wickline.org/

4. The RGB system R G B Red 25500 Green 0 255 0 Blue 0 0 255 Yellow 255 255 0 Magenta 255 0 255 Cyan 0 255 255 Black 0 0 0 White 255 255 255 white!

5. Hue Hue is what we normally think of as the colour name Red Blue Orange

6. Getting a different colour in the RGB system R G B Red25500 Yellow2552550 R For R (255 + 255)/2 = 255 G For G(0 + 255)/2 = 127 B For B (0 + 0)/2 = 0 So, … Orange 2551270 Orange is a different hue from red or yellow

7. Saturation Saturation refers to how pure the hue is with respect to a white reference

8. Changing the saturation of a colour You can move the colour closer to white R G B Red 255 0 0 Pink1 255100 100 added 100 (R is already 255) Pink2 255 150 150 added 50 Pink3 255210210 added 60 Pink4 255255255 Yep, white again! Pink3 is less saturated than Pink1

9. Value and saturation You can also bring a colour closer to black

10. R G B Cyan 10 255 255 Darker Cyan 0 210 210 subtracted 45 Even Darker Cyan 0 153 153 subtracted 57 Bringing a colour closer to black

11. Decimal vs Hexadecimal RGB Red 25500 dec Red FF00hex Blue 0 0 255 dec Blue 0 0 FF hex Dark Cyan0153153dec Dark Cyan09999hex

12. Base 10 vs base 16  While decimal systems are base 10, hexadecimal systems are base 16. So, in decimal we count 1 2 3 4 5 6 7 8 9 10 11 12... In hexadecimal we count 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12... Ahex = 10dec Bhex = 11dec … 10hex = 16dec

13. Converting from dec to hex  In a hexadecimal system you know what a two digit number is by multiplying the first digit by 16 and then adding the second digit So,...in a decimal system 25 is 2 X 10 + 5 = 25 (decimal) but, in a hexadecimal system 25 is 2 X 16 + 5 = 37 (decimal)

14. Another example in a hexadecimal system FC is: F X 16 + C = 15 X 16 + 12 = 252

15. “Web safe” colours

16. Colour schemes  Rather than randomly choosing colours you think go together, you might try to use a colour scheme  Four common types to consider are monochromatic analogous triadic complementary

17. Monochrome1 RG B 20012 38 25572 98 added 60 (or maxed out at 255) 255 132 148 added 50

18. Monochrome2 RG B 174133 78 12483 28 subracted 50 8443 0 subtracted 40 (or hit 0)

19. Analogous 1 RG B 216220 32 121230 22 31221 144

20. Analogous 2 RG B 18257 195 8772 180 82147 170

21. Triadic 1 RG B 18257 195 57195 182 195182 57

22. Triadic 2 RG B 102158 94 15894 102 94102 158

23. Complementary 1 RG B 102158 94 15397 161

24. Complementary 2 RG B 85112 167 170143 88

25. Types of fonts decorative

26. Examples  Serif – ok in printed matter  Baskerville old face  Book Antiqua  Times new roman  Sans Serif – for screens, sans serif is better  verdana  century gothic  tahoma

27. Beware! of italics regular is easier to read on a screen

28. Keep in mind  The optimum number of characters-per-line the human eye can read is 80  Dark type against a light surface is much easier to read than light type against a dark surface Therefore, light type against a dark surface requires a font size two sizes larger to be equally legible

29. Today’s lab  colour tasks  make sure to read the suggestions on the website regarding things you and your group could be doing