1 / 29

Week 7

Week 7. Colour and Typography. The three types of cones. http://www.toledo-bend.com/colorblind/Ishihara.asp http://webexhibits.org/causesofcolor/2.html#vissamp http://www.lighthouse.org/accessibility/effective-color-contrast/

ronni
Download Presentation

Week 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Week 7 Colour and Typography

  2. The three types of cones

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

  4. The RGB system R G B Red 255 0 0 Green 0 255 0 Blue 0 0 255 Yellow255 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 Red255 0 0 Yellow255 255 0 For R (255 + 255)/2 = 255 For G (0 + 255)/2 = 127 For B (0 + 0)/2 = 0 So, … Orange 255 127 0 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 Pink1255 100 100 added 100 (R is already 255) Pink2 255 150 150 added 50 Pink3 255 210 210 added 60 Pink4 255 255 255 Yep, white again! Pink3is less saturated than Pink1

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

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

  11. Decimal vs Hexadecimal R G B Red 255 0 0 dec Red FF 0 0 hex Blue 0 0 255 dec Blue 0 0 FF hex Dark Cyan0 153 153 dec Dark Cyan0 99 99 hex

  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 R G B 200 12 38 255 72 98added 60 (or maxed out at 255) 255 132 148added 50

  18. Monochrome2 R G B 174 133 78 124 83 28subracted 50 84 43 0subtracted 40 (or hit 0)

  19. Analogous 1 R G B 216 220 32 121 230 22 31 221 144

  20. Analogous 2 R G B 182 57 195 87 72 180 82 147 170

  21. Triadic 1 R G B 182 57 195 57 195 182 195 182 57

  22. Triadic 2 R G B 102 158 94 158 94 102 94 102 158

  23. Complementary 1 R G B 102 158 94 153 97 161

  24. Complementary 2 R G B 85 112 167 170 143 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 of italics regular is easier to read on a screen 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

More Related