Color in Design

Uses of Color• Call attention to specific data or information• Identify elements of structure and processes• Portray natural objects realistically• Depict the logical structure of ideas and processes• Portray time and progress• Increase appeal, memorability, and

comprehensibility• Reduce errors of legibility or interpretation• Increase the number of dimensions for coding data

Pitfalls of Color

• May cause problems for color deficient vision (12% of males)

• May cause visual fatigue with strong colors• May contribute to visual confusion if too

complex• May have negative cultural or historical

associations– Yellow and Black

• May exhibit confusing cross-disciplinary or cultural connotations– Red to the US and Red to China

Spectrum & Hue

• SPECTRUM: All the possible colors in a color space

• HUE: specific location on color wheel or in color spectrum

Value

• VALUE: describes how light or dark something is. The following example shows a red hue at varying values

Saturation

SATURATION: defines the intensity of a color. Muted refers to colors with little saturation.

Contrast

CONTRAST: separation between values. Text color must contrast with background to be readable.

Low Contrast is often difficult to read….

High Contrast is easy to read…

The Color Wheel

• There are 12 hues in the spectrum of color.

• They are divided into three categories…

R ed-vio le t

V io le t

B lue-vio le tB lue

B lue-green

G reen

Yellow -green

Yellow

Yellow -orange O range

R ed-orange

R ed

The Primary Colors

• Red, Yellow, and Blue

• These colors cannot be combined from mixing any colors together.

R ed-vio le t

V io let

B lue-vio letB lue

B lue-green

G reen

Yellow -green

Yellow

Yellow -orange O range

R ed-orange

R ed

The Secondary Colors

• Green, violet, and orange

• Made by combining the Primary colors together.

R ed-vio le t

V io let

B lue-vio letB lue

B lue-green

G reen

Yellow -green

Yellow

Yellow -orange O range

R ed-orange

R ed

The Tertiary Colors

• Yellow-green, blue-green, blue-violet, red-violet, red-orange, yellow-orange.

• Made by combining a primary and a secondary hue.

• Named by the Primary color first.

R ed-vio le t

V io let

B lue-vio letB lue

B lue-green

G reen

Yellow -green

Yellow

Yellow -orange O range

R ed-orange

R ed

Another look

• Color wheels show how colors are related – imagine a circular rainbow spectrum (of course many hues can exist on this spectrum)

Primary

Secondary

Tertiary

Color Relationships

• Working with the colors can result in a harmonious design. Here are some color combinations that work.

Analogous

• 3-5 colors next to each other on the color wheel

Complementary colors

• opposites on the color wheel

Monochromatic

• Single hue with different values of that hue

Applying Color

• Saturation and value are as important as hue. These attributes of color can be used to create contrast.

• Try designing in gray first (This will train your eye to appreciate contrast)

Color Summary

• Strive for high contrast (readability)

• Effective color schemes are simple and harmonious

• Use different colors or values for important information to attract attention

Tips for Designing with Color

Use 3-5 colors in your design

Minimum shift in color/size• Light text on dark background for dark environment• Dark text on light background for light environment

Use familiar, consistent color coding• Red – stop, danger, hot, fire. • Yellow – Caution, slow• Green – go, okay, safe. • Blue – Cold, water, death• Warm colors – Action, response• Cool colors – background, distance• Gray, white – neutral• Context-dependent  

Tips for Designing with Color

Use the same color for grouping related elements.

Color to your audience• Men prefer blue to red, women red to blue• Men prefer orange to yellow, women yellow to

orange• Young prefer bright, old prefer sober/restrained

colors

Tips for Designing with Color

Use redundant coding of shape, as well as color, if possible. The more cues to remember an object, the better.

Use high-value, high-chroma colors to attract attention. • Bright red better / faster than yellow, orange• Older viewers have easier time with bright

Tips for Designing with Color

• Watch out for default colors!– Some browsers default to a white background

and others to gray. Specify a background color in your body tag to ensure all browsers use the same color.

Tips for Designing with Color

Monochromatic

GrayscaleComplementary

Analogous