1. Color
Presenting Content – Session “Design Preliminaries”

2. 1.CMYK vs. RGB
2.Combinations
3.Dominance
4.Choosing a color palette
5.Implementing color in CSS

3. CMYK RGB
Cyan Magenta Yellow blacK Red Green Blue
• subtractive
• used in print
• additive
• used for displays

4. Combinations
Monochromatic Complementary Split-Complementary
TriadAnalogousDouble-Complementary
Source: http://www.worqx.com/color/combinations.htm

5. Combinations
Source: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/
Good Bad

6. Combinations
Source: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/
Good Bad

7. Combinations
Good
 High Contrast
 Economy
 Functionality
 Usability
Bad
 Low Contrast
 Paint Pot
 Aimlessness
 Obstacle

8. Dominance
RED
Source: http://www.webdesignledger.com/

9. Dominance
GREEN
Source: http://www.webdesignledger.com/

10. Dominance
BROWN
Source: http://www.webdesignledger.com/

11. Dominance
PINK
Source: http://www.webdesignledger.com/

12. Dominance
Dark/Gray
Source: http://www.webdesignledger.com/

13. Dominance
Colorful
Source: http://www.webdesignledger.com/

14. Choosing a color palette
Mission Objectives:
1. Know your audience
2. Know your website’s
objective
3. Avoid problematic
color combinations
4. Beware of functionality
Source: http://www.mister8.com/wp-
content/uploads/2010/03/mission-
impossible-66-tv-02-g.jpg

15. kuler.adobe.com

16. Implementing color in CSS
1. Color names
http://www.w3schools.com/css/css_colornames.asp
2. RGB values
color: rgb(0,255,102); or color: rgb(0%,100%,40%);
3. Hexadecimal values
color: #00FF66;  color: #0F6;

17. Tasks
1. Create external style sheet for provided
HTML documents
2. Implement color palette from kuler
Use all three methods of implementing colors.
3. Sensible vs. Senseless
Try to vary the use of your colors in order to create
a good and a bad example with the same palette.