Color

761 views
721 views

Published on

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

No Downloads
Views
Total views
761
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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.

×