Design Tips for Design Tips for Using ColorUsing Color

ObjectivesObjectives

• Identify and discuss various functions of color in design

• Define terms related to color

• Offer some tips on using color as a design tool

Hmmmm . . .Hmmmm . . .

• How are we How are we affected by color?affected by color?

• Do we respond to Do we respond to certain colors in a certain colors in a certain way?certain way?

• How did we learn How did we learn these responses?these responses?

Color ContributionsColor Contributions• Can influence Can influence

mood and mood and receptivenessreceptiveness

• Provide visual Provide visual varietyvariety

• Focus attentionFocus attention

• Enhance meaningEnhance meaning

• Clarify Clarify informationinformation

• Establish Establish consistent lookconsistent look

• Indicate real Indicate real world appearanceworld appearance

Color ContributionsColor Contributions

Presentation Presentation ElementsElements

BackgroundFormat andColor

Text Style andColor

Highlight Elementsand Color

The Color WheelThe Color Wheel

The Color WheelThe Color Wheel• Colors across the Colors across the

wheel from each wheel from each other are said to be other are said to be “complementary”“complementary”

The Color WheelThe Color Wheel• Careful! There are Careful! There are

color models that color models that use Red, Blue and use Red, Blue and Yellow as primariesYellow as primaries

• Complementary Complementary colors will be colors will be different with each different with each modelmodel

The Color WheelThe Color Wheel• Color “opposites” Color “opposites”

is a better is a better description!description!

The Color WheelThe Color Wheel• Color “opposites” do Color “opposites” do

not work well when not work well when placed next to each placed next to each otherother

• Especially, fully Especially, fully saturated oppositessaturated opposites

• Red & Green - Yuk!Red & Green - Yuk!

ReadabilityReadabilityMaximum readability is achieved throughcontrast.

Readability!

Readability!

Contrast DefinedContrast Defined

The difference between the “lightest” The difference between the “lightest” lights and the “darkest” darks.lights and the “darkest” darks.

The highest contrast isblack with white

Color Contrast DefinedColor Contrast Defined

The relative differenceThe relative differencebetween two adjacent colors.between two adjacent colors.

Contrast TypesContrast Typesfor Color for Color

Hue (Color)

Brightness

Saturation

Hue ContrastHue Contrast

Colors have “hue” contrast whenColors have “hue” contrast whenthey are opposites on the color wheel.they are opposites on the color wheel.

Hue ContrastHue Contrast

Opposite hueshave maximum hue contrast.

Hue ContrastHue Contrast

They rarely work welltogether asforeground/backgroundcombinations!

They clash!!!!

Hue ContrastHue Contrast

If You Must UseIf You Must UseOpposites TogetherOpposites TogetherReduce saturation of at least one hue -Reduce saturation of at least one hue -

Separate with a black or white line -Separate with a black or white line -

If You Must UseIf You Must UseOpposites TogetherOpposites Together

Separate by distance -Separate by distance -

If You Must UseIf You Must UseOpposites TogetherOpposites Together

Saturation ContrastSaturation ContrastContrast increases as differencesContrast increases as differencesin saturation increase - in saturation increase -

Saturation ContrastSaturation ContrastContrast increases as differencesContrast increases as differencesin brightness increase - in brightness increase -

Sample Contrast Sample Contrast CombinationsCombinations

Yellow contrasts inbrightness and hue.

Sample Contrast Sample Contrast CombinationsCombinations

This is brightness- only contrast

Sample Contrast Sample Contrast CombinationsCombinations

This is hue- only contrast

The Color WheelThe Color Wheel• Colors next to Colors next to

each other are each other are said to be said to be “analogous”“analogous”

• Sometimes called Sometimes called “spectral “spectral neighborsneighbors

• They work well as They work well as schemes schemes

The Color WheelThe Color Wheel• Good for highlight Good for highlight

color color combinationscombinations

• Not good for Not good for fore/background fore/background combinations combinations because . . . because . . .

Spectral NeighborsSpectral Neighbors

Have lowHave lowhue contrast!hue contrast!

Spectral NeighborsSpectral Neighbors

Avoid use when distinct separation is Avoid use when distinct separation is desired!desired!-- Pie chart pieces-- Pie chart pieces-- Foreground/Background text combos-- Foreground/Background text combos

Spectral NeighborsSpectral Neighbors

• Work well as Work well as shadow or shadow or “highlight colors.“highlight colors.

Color Triads -PrimaryColor Triads -PrimaryEqually spacedEqually spacedaround the coloraround the colorwheelwheel

Generally, aren’t pleasingGenerally, aren’t pleasingcombinationscombinations

Equally spacedEqually spacedaround the coloraround the colorwheelwheel

Generally, aren’t pleasingGenerally, aren’t pleasingcombinationscombinations

Color Triads - SecondaryColor Triads - Secondary

Color CategoriesColor Categories

““Warm” ColorsWarm” Colors Moderate Moderate saturationsaturation- Reds- Reds- Oranges- Oranges- Yellows- Yellows- Browns- Browns

Hot Colors . . .Hot Colors . . .

Can cause viewer fatigue!!Can cause viewer fatigue!!

Color CategoriesColor Categories

““Cool” ColorsCool” Colors Moderate Moderate saturationsaturation- Blues- Blues- Greens- Greens

Cool Colors . . .Cool Colors . . .

Can make a viewer passive!

Neutral Colors . . .Neutral Colors . . .

Serve a good backdrops forServe a good backdrops formost highlights.most highlights.

Color TipsColor Tips• Limit the number of Limit the number of

hues - some hues - some suggest no more 5suggest no more 5

• Goal of color is to Goal of color is to enhance design not enhance design not make a busy, make a busy, distracting distracting messagemessage

Color TipsColor Tips• Children prefer Children prefer

bright, “fun” bright, “fun” colors colors

• They shy away They shy away from dark, from dark, moody colorsmoody colors

Color TipsColor Tips• Avoid limited Avoid limited

contrast for contrast for older adults - older adults - our eyes don’t our eyes don’t work as well as work as well as they used to! they used to!

Color TipsColor Tips• Avoid deeply Avoid deeply

saturated colors saturated colors placed next to placed next to each other - they each other - they tend to shimmer tend to shimmer on theon the

Color TipsColor Tips• Bright colors Bright colors

attract attentionattract attention– good for bulletsgood for bullets– buttonsbuttons– etcetc

• But, don’t But, don’t overwhelm overwhelm viewerviewer

Next

Step 1 Step 2 Step 3

Color can highlight steps in a process

Color TipsColor Tips

Color TipsColor Tips

• Emphasize Emphasize important important words or words or elements with elements with color.color.

Highlight important words

for emphasis

Color TipsColor Tips

Avoid small text ondithered backgrounds.

Curriculum Content andCurriculum Content andActivities created byActivities created byDr. Mark MortensenDr. Mark Mortensen

Dept. of Technology & CognitionDept. of Technology & CognitionUniversity of North TexasUniversity of North Texas

Copyright C. Mark Mortensen 2001