0
Color
Presenting Content – Session “Design Preliminaries”
1.CMYK vs. RGB
2.Combinations
3.Dominance
4.Choosing a color palette
5.Implementing color in CSS
CMYK RGB
Cyan Magenta Yellow blacK Red Green Blue
• subtractive
• used in print
• additive
• used for displays
Combinations
Monochromatic Complementary Split-Complementary
TriadAnalogousDouble-Complementary
Source: http://www.worqx.c...
Combinations
Source: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/
Good Bad
Combinations
Source: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/
Good Bad
Combinations
Good
 High Contrast
 Economy
 Functionality
 Usability
Bad
 Low Contrast
 Paint Pot
 Aimlessness
 Obs...
Dominance
RED
Source: http://www.webdesignledger.com/
Dominance
GREEN
Source: http://www.webdesignledger.com/
Dominance
BROWN
Source: http://www.webdesignledger.com/
Dominance
PINK
Source: http://www.webdesignledger.com/
Dominance
Dark/Gray
Source: http://www.webdesignledger.com/
Dominance
Colorful
Source: http://www.webdesignledger.com/
Choosing a color palette
Mission Objectives:
1. Know your audience
2. Know your website’s
objective
3. Avoid problematic
c...
kuler.adobe.com
Implementing color in CSS
1. Color names
http://www.w3schools.com/css/css_colornames.asp
2. RGB values
color: rgb(0,255,10...
Tasks
1. Create external style sheet for provided
HTML documents
2. Implement color palette from kuler
Use all three metho...
Upcoming SlideShare
Loading in...5
×

Color

612

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
612
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Color"

  1. 1. Color Presenting Content – Session “Design Preliminaries”
  2. 2. 1.CMYK vs. RGB 2.Combinations 3.Dominance 4.Choosing a color palette 5.Implementing color in CSS
  3. 3. CMYK RGB Cyan Magenta Yellow blacK Red Green Blue • subtractive • used in print • additive • used for displays
  4. 4. Combinations Monochromatic Complementary Split-Complementary TriadAnalogousDouble-Complementary Source: http://www.worqx.com/color/combinations.htm
  5. 5. Combinations Source: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/ Good Bad
  6. 6. Combinations Source: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/ Good Bad
  7. 7. Combinations Good  High Contrast  Economy  Functionality  Usability Bad  Low Contrast  Paint Pot  Aimlessness  Obstacle
  8. 8. Dominance RED Source: http://www.webdesignledger.com/
  9. 9. Dominance GREEN Source: http://www.webdesignledger.com/
  10. 10. Dominance BROWN Source: http://www.webdesignledger.com/
  11. 11. Dominance PINK Source: http://www.webdesignledger.com/
  12. 12. Dominance Dark/Gray Source: http://www.webdesignledger.com/
  13. 13. Dominance Colorful Source: http://www.webdesignledger.com/
  14. 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. 15. kuler.adobe.com
  16. 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. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×