![Page 1: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/1.jpg)
CS-10 2008 - Session 2 1Color Theory
September 22nd, 2008
![Page 2: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/2.jpg)
CS-10 2008 - Session 2 2
What is Color Theory?
Premeditated use of color
![Page 3: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/3.jpg)
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
![Page 4: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/4.jpg)
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
![Page 5: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/5.jpg)
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
#
![Page 6: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/6.jpg)
CS-10 2008 - Session 2 6
The Color Wheel
![Page 7: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/7.jpg)
CS-10 2008 - Session 2 7
Why is it in a circle?
To show the relationships of the colors
![Page 8: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/8.jpg)
CS-10 2008 - Session 2 8
Color Schemes are
A collection of colors
We see colors together all the time
![Page 9: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/9.jpg)
CS-10 2008 - Session 2 9
Defined color schemes
Primary Colors
red,blue,yellow
The three colors that make every other color
![Page 10: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/10.jpg)
CS-10 2008 - Session 2 10
Defined color schemes
Secondary Colors
green,purple,orange
The first three colors made from red, blue, & yellow
![Page 11: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/11.jpg)
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
![Page 12: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/12.jpg)
CS-10 2008 - Session 2 12
Defined color schemes
Analogous Colors
blue-violet,purple,red-violet
Colors adjacent to each other
![Page 13: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/13.jpg)
CS-10 2008 - Session 2 13
Defined color schemes
Complimentary Colors
red,green
Colors across from each other, opposites
![Page 14: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/14.jpg)
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
![Page 15: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/15.jpg)
CS-10 2008 - Session 2 15
Defined color schemes
Triadic Colors
red-violet,yellow-orange,blue-green
3 colors evenly spaced from one another
![Page 16: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/16.jpg)
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
![Page 17: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/17.jpg)
CS-10 2008 - Session 2 17
What did we learn?
What other cues did we gather from those schemes?
How many colors?
1 - 4
![Page 18: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/18.jpg)
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
![Page 19: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/19.jpg)
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
![Page 20: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/20.jpg)
CS-10 2008 - Session 2 20
Color meaning
What colors evoke hunger?
What colors evoke depression?
Happiness?
http://dutchboy.com/colors/choose/meaning/meaning/
![Page 21: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/21.jpg)
CS-10 2008 - Session 2 21
Logo Fail
![Page 22: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/22.jpg)
CS-10 2008 - Session 2 22
Logo Fail
![Page 23: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/23.jpg)
CS-10 2008 - Session 2 23
A classic misunderstanding
Of color use on the web
![Page 24: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/24.jpg)
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/
![Page 25: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/25.jpg)
CS-10 2008 - Session 2 25
Colorscheme picking
• Adobe Kuler• Colour Lovers• Color scheme generator 2
See Gimme, gimme section for more color links
![Page 26: CS-10 2008 - Session 2 1 Color Theory September 22 nd, 2008](https://reader036.vdocument.in/reader036/viewer/2022081514/56649ebf5503460f94bc9e5d/html5/thumbnails/26.jpg)
CS-10 2008 - Session 2 26