Color Theory 2012 - 2

7/31/2019 Color Theory 2012 - 2

1/38

Color and Design

7/31/2019 Color Theory 2012 - 2

2/38

Web Site Components

Technology

Interaction

Visual Design

Content

Site Architecture

7/31/2019 Color Theory 2012 - 2

3/38

Color

Color choice defines web site at a glance

Powerful and persuasive tool Color is free!

In web design only

Cost of color plays big role in print

7/31/2019 Color Theory 2012 - 2

4/38

Color and Mood

Commonly accepted psychological effects

Yellow = Happy Red = Energizing

Individual tastes

Based on complex emotional responses

Not logical Black is depressing to some people, dramatic to others

7/31/2019 Color Theory 2012 - 2

5/38

Color and Mood

Age Children and teens have different color tastes

than adults

Gender Men and women prefer different colors

Culture Cultures around world have different feelings and

associations with colors

7/31/2019 Color Theory 2012 - 2

6/38

Color Theory

Primary colors

Red, Yellow, Blue

Any color of rainbow canbe made from primarycolors, plus black andwhite

7/31/2019 Color Theory 2012 - 2

7/38

The Color Wheel

Secondary colors

Generated from mixing

adjacent primary colors

Tertiary colors

Generated from mixingadjacent secondary and

primary colors

7/31/2019 Color Theory 2012 - 2

8/38

Color Theory

Mixing all primary,secondary, and tertiary

colors creates brown

7/31/2019 Color Theory 2012 - 2

9/38

Color Theory

Black, white, andshades of gray are true

neutrals Black and white cannot

be created by mixingany other colors

Can get gray by mixingopposing colors oncolor wheel Complementary colors

7/31/2019 Color Theory 2012 - 2

10/38

Color Attributes

Hue (chroma)

Technical term for a specific color Each separate wedge of color wheel

Can be mixed to create other hues

7/31/2019 Color Theory 2012 - 2

11/38

Color Attributes

Value

The lightness or darkness of a color Tint

Mixing white with a hue

Shade

Mixing black with a hue

7/31/2019 Color Theory 2012 - 2

12/38

Value

High-key

Light in value Tints such as pink

Low-key

Dark in value

Shades such as burgundy

7/31/2019 Color Theory 2012 - 2

13/38

Color Attributes

Saturation

Level of purity or intensity of a hue Fully-Saturated Hue

Has not been mixed with black, white, gray, or itscomplimentary color

7/31/2019 Color Theory 2012 - 2

14/38

De-Saturating a Hue

Mixing a hue with gray or complimentary

color Result is a tone

toned down

Less intense

Sophisticated, earthy, rich

Drab, dull, grungy

7/31/2019 Color Theory 2012 - 2

15/38

Color Attributes

Temperature

Colors can feel warm or cool Warm

Yellow, orange, red

Cool

Purple, blue, green

7/31/2019 Color Theory 2012 - 2

16/38

Designing Cautions

If designing on LCD screen

Check colors on other monitors early in designprocess

LCD screens have brighter and more saturatedpalette

Viewing angle on LCD alters way colors appear

7/31/2019 Color Theory 2012 - 2

17/38

Choosing a Color Scheme

Most important thing you can do to build

appeal, mood, and ambiance for your site Some organizations have set colors you

cannot deviate from

Select colors from logo, add additional tints or

shades for variety

7/31/2019 Color Theory 2012 - 2

18/38

7/31/2019 Color Theory 2012 - 2

19/38

Whats Your Mood?

Fully-saturated hues

Vivid, intense, child-like

Tones and shades

Sophisticated

Tints

Babies, femininity

Colors havinguncommon names are

seen as being morecomplex andsophisticated

Mauve

Salmon Grayish-green with blue

undertones

7/31/2019 Color Theory 2012 - 2

20/38

Which Colors Portray Your Mood?

Limit to 1-3 colors

Difficult to unify large number of colors Repetition of color unifies a page

Every color you use should appear in more thanone place on page

Repeat colors throughout site Reassures visitors they are in right place

7/31/2019 Color Theory 2012 - 2

21/38

Using Color-Coding Schemes

Should be of approximately same value and

saturation Express same mood

Part of unified, site-wide color scheme

Keep other site characteristics consistent

Layout, graphics, navigation

7/31/2019 Color Theory 2012 - 2

22/38

Color Proportions

Dont use equalamounts of each color Page will look boring,

lacking focal point

3 color scheme: Background color 60%

Header, graphics thatneed some emphasis30%

Most striking, mostemphasis 10%

7/31/2019 Color Theory 2012 - 2

23/38

Monochromatic Scheme

Tints and shades of a single hue

Unified, harmonious, professional Can be dull if poorly used

7/31/2019 Color Theory 2012 - 2

24/38

Complimentary Color Scheme

Two colors opposing each other on traditional colorwheel

Fully-saturated complimentary colors Vibrant, jarring, attention getting, creates tension and

illusion of movement

Often used by sports teams

Not a good idea for background/text

Can be tamed by using tints, shades, tones Pale lettuce green/baby pink

Burgundy/dark forest green

7/31/2019 Color Theory 2012 - 2

25/38

Two colors opposing each other on traditional colorwheel

Fully-saturated complimentary colors

Vibrant, jarring, attention getting, creates tension andillusion of movement

Not a good idea for background/text

Can be tamed by using tints, shades, tones Pale lettuce green/baby pink

Burgundy/dark forest green

Complimentary Color Scheme

7/31/2019 Color Theory 2012 - 2

26/38

Triad Color Scheme

Three evenly spaced colors on color wheel

Bold, vibrant, jarring, but not as much ascomplimentary colors

Often used in childrens sites

7/31/2019 Color Theory 2012 - 2

27/38

Analogous Color Scheme

Several colors adjacentto each other on color

wheel

Citrus hues of yellow,orange, green

Harmonious, stylish,

pleasing

Warm colors

Cozy, inviting

Appear closer to viewer

Cool colors

Sophisticated,professional

Appear to recede fromviewer

7/31/2019 Color Theory 2012 - 2

28/38

Inspiration for Color Schemes

Fashion

Home dcor

High-end sites

Television ads

Clothing

Catalogs

Opening credits of amovie

Fabric stores

Art books

Window displays

Box of crayons

7/31/2019 Color Theory 2012 - 2

29/38

Color Contrast

Degree of difference between various colorattributes

Used to emphasize some items while de-emphasizing others

7/31/2019 Color Theory 2012 - 2

30/38

Color Contrast

Hue Complimentary colors have greatest contrast

Value Lighter colors contrast with darker colors

Saturation

Highly saturated colors contrast with lowsaturated color

Temperature Warm colors contrast with cool colors

7/31/2019 Color Theory 2012 - 2

31/38

Color Contrast

For maximum legibility:

Foreground elements (text) should contrast inVALUE with background elements

Black text on white background

NOT black on navy background

Should always be able to remove all color fromdesign and still be able to read it

This is why black text on a white background is so popular andeffective. Theres a high degree of contrast.

7/31/2019 Color Theory 2012 - 2

32/38

Color Contrast

For maximum legibility:

Foreground elements (text) should contrast inVALUE with background elements

Black text on white background

NOT black on navy background

Should always be able to remove all color fromdesign and still be able to read it

This is why black text on a white background is so popular andeffective. Theres a high degree of contrast.

7/31/2019 Color Theory 2012 - 2

33/38

Color Contrast

7/31/2019 Color Theory 2012 - 2

34/38

Contrast with Text

Simultaneous Contrast occurs when a color like red is foregrounded on blue. Note how the text appears to slightly vibrate.

This would get annoying real quick.

Honestly, this is just painful. Do not make your readers strugglewith this!

7/31/2019 Color Theory 2012 - 2

35/38

Background Colors

Need to have sufficient value contrastbetween foreground and background

Dark text on light background

Print media

Black backgrounds

Overused, but when done well can be stunning

Dark gray is newest trend

Mercedes, Jonathan Yuen (self promotesinteractive web site)

7/31/2019 Color Theory 2012 - 2

36/38

7/31/2019 Color Theory 2012 - 2

37/38

Color and Accessibility

10% of male population is color blind

Ensure there is sufficient value contrastbetween foreground and background

So that hue is irrelevant for legibility

View in grayscale to test

Color alone should never be only clue tomeaning

Navigation links

7/31/2019 Color Theory 2012 - 2

38/38

Thank You

Any ????????????