CS-10 2008 - Session 2 1Color Theory

September 22nd, 2008

CS-10 2008 - Session 2 2

What is Color Theory?

Premeditated use of color

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

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

CS-10 2008 - Session 2 5

Dissecting a hex color

FF0000Alternatively, you can specify the red (R), green (G), and blue (B) intensities directly

} } }Red intensity Green intensity Blue intensity

#

CS-10 2008 - Session 2 6

The Color Wheel

CS-10 2008 - Session 2 7

Why is it in a circle?

To show the relationships of the colors

CS-10 2008 - Session 2 8

Color Schemes are

A collection of colors

We see colors together all the time

CS-10 2008 - Session 2 9

Defined color schemes

Primary Colors

red,blue,yellow

The three colors that make every other color

CS-10 2008 - Session 2 10

Defined color schemes

Secondary Colors

green,purple,orange

The first three colors made from red, blue, & yellow

CS-10 2008 - Session 2 11

Defined color schemesTertiary Colors

red-violet,red-orange,yellow-green,yellow-orange,etc

The mixture of one primary color and one secondary color

CS-10 2008 - Session 2 12

Defined color schemes

Analogous Colors

blue-violet,purple,red-violet

Colors adjacent to each other

CS-10 2008 - Session 2 13

Defined color schemes

Complimentary Colors

red,green

Colors across from each other, opposites

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

CS-10 2008 - Session 2 15

Defined color schemes

Triadic Colors

red-violet,yellow-orange,blue-green

3 colors evenly spaced from one another

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

CS-10 2008 - Session 2 17

What did we learn?

What other cues did we gather from those schemes?

How many colors?

1 - 4

CS-10 2008 - Session 2 18

More terminology

Hue – colorSaturation – hue purity (tainted by white or

black)Shade – adding black to a colorTint – adding white to a color

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

CS-10 2008 - Session 2 20

Color meaning

What colors evoke hunger?

What colors evoke depression?

Happiness?

http://dutchboy.com/colors/choose/meaning/meaning/

CS-10 2008 - Session 2 21

Logo Fail

CS-10 2008 - Session 2 22

Logo Fail

CS-10 2008 - Session 2 23

A classic misunderstanding

Of color use on the web

CS-10 2008 - Session 2 24

But you said

To pick a color scheme

Why is there a problem?– Readability ( contrast check )– Usability– Accessibility

Website Develop Color Galleries– http://designshack.co.uk/– http://www.cssclip.com/

CS-10 2008 - Session 2 25

Colorscheme picking

• Adobe Kuler• Colour Lovers• Color scheme generator 2

See Gimme, gimme section for more color links

CS-10 2008 - Session 2 26