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/

http://endorseyou.wordpress.com/2007/09/28/remember-the-color-blind-in-your-design/

http://colorfilter.wickline.org/

The RGB system

R G R G BBRed 255 0 0Green 0 255 0Blue 0 0 255Yellow 255 255 0 Magenta 255 0 255Cyan 0 255 255Black 0 0 0White 255 255 255 white!

Hue

Hue is what we normally think of as the colour name

RedBlueOrange

Getting a different colour in the RGB system R R G G BB

Red 255 0 0Yellow 255 255 0

For RR (255 + 255)/2 = 255For GG (0 + 255)/2 = 127For BB (0 + 0)/2 = 0

So, …

Orange 255 127 0

Orange is a different hue from red or yellow

Saturation

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

Changing the saturation of a colour

You can move the colour closer to whiteYou can move the colour closer to white

R G BR G BRed 255 0 0 Pink1 255 100 100 added 100 (R is already

255)

Pink2 255 150 150 added 50

Pink3 255 210 210 added 60

Pink4 255255 255 Yep, white again!

Pink3 is less saturated than Pink1

Value and saturation

You can also bring a colour closer to black

R G BR G BCyan 10 255 255Darker Cyan 0 210 210 subtracted 45

Even Darker Cyan 0 153 153 subtracted 57

Bringing a colour closer to black

Decimal vs Hexadecimal

RR GG BBRed 255 0 0 decRed FF 0 0 hex Blue 0 0 255 decBlue 0 0 FF hex

Dark Cyan 0 153 153 decDark Cyan 0 99 99 hex

Base 10 vs base 16

While decimal systems are base 10, hexadecimal systems are base 16.

So, in decimal we count1 2 3 4 5 6 7 8 9 10 11 12 ...

In hexadecimal we count1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 ...

Ahex = 10dec Bhex = 11dec … 10hex = 16dec

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 is2 X 10 + 5 = 25 (decimal)but,in a hexadecimal system 25 is2 X 16 + 5 = 37 (decimal)

Another example

in a hexadecimal system FC is:

F X 16 + C = 15 X 16 + 12 = 252

“Web safe” colours

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

Monochrome1

RR GG B B 200 12 38

255 72 98 added 60 (or maxed out at 255)

255 132 148 added 50

Monochrome2

RR GG B B 174 133 78

124 83 28 subracted 50

84 43 0 subtracted 40 (or hit 0)

Analogous 1

RR GG B B 216 220 32

121 230 22 31 221 144

Analogous 2

RR GG B B 182 57 195

87 72 180 82 147 170

Triadic 1

RR GG B B 182 57 195

57 195 182 195 182 57

Triadic 2

RR GG B B 102 158 94

158 94 102 94 102 158

Complementary 1

RR GG B B 102 158 94

153 97 161

Complementary 2

RR GG B B 85 112 167

170 143 88

Types of fonts

decorative

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

Beware!

of italicsof italics

regular is easier to read on a screenregular is easier to read on a screen

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

Today’s lab

colour tasks

make sure to read the suggestions on the website regarding things you and your group could be doing