ColorPresenting Content – Session “Design Preliminaries”

1.CMYK vs. RGB2.Combinations3.Dominance4.Choosing a color palette5.Implementing color in CSS

CMYK RGBCyan 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.com/color/combinations.htm

recommended read!

CombinationsSource: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/

Good Bad

recommended read!

CombinationsSource: http://veerle-v2.duoh.com/blog/comments/choosing_color_combinations/

Good Bad

recommended read!

Combinations

Good

High Contrast Economy Functionality Usability

Bad

Low Contrast Paint Pot Aimlessness Obstacle

DominanceRED

Source: http://www.webdesignledger.com/

recommended read!

DominanceGREEN

Source: http://www.webdesignledger.com/

recommended read!

DominanceBROWN

Source: http://www.webdesignledger.com/

recommended read!

DominancePINK

Source: http://www.webdesignledger.com/

recommended read!

DominanceDark/Gray

Source: http://www.webdesignledger.com/

recommended read!

DominanceColorful

Source: http://www.webdesignledger.com/

recommended read!

Choosing a color palette

Mission Objectives:1. Know your audience2. Know your website’s

objective3. Avoid problematic

color combinations4. Beware of functionality

Source: http://www.mister8.com/wp-content/uploads/2010/03/mission-impossible-66-tv-02-g.jpg

kuler.adobe.com

Implementing color in CSS

1. Color nameshttp://www.w3schools.com/css/css_colornames.asp

2. RGB valuescolor: rgb(0,255,102); or color: rgb(0%,100%,40%);

3. Hexadecimal valuescolor: #00FF66; color: #0F6;

Tasks

1. Create external style sheet for provided HTML documents

2. Implement color palette from kulerUse all three methods of implementing colors.

3. Sensible vs. SenselessTry to vary the use of your colors in order to create a good and a bad example with the same palette.