Design Tips for Using Color

Objectives 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... How are we affected by color?How are we affected by color? Do we respond to certain colors in a certain way?Do we respond to certain colors in a certain way? How did we learn these responses?How did we learn these responses?

Color Contributions Can influence mood and receptivenessCan influence mood and receptiveness Provide visual varietyProvide visual variety Focus attentionFocus attention Enhance meaningEnhance meaning

Clarify informationClarify information Establish consistent lookEstablish consistent look Indicate real world appearanceIndicate real world appearance Color Contributions

Presentation Elements

The Color Wheel

Colors across the wheel from each other are said to be “complementary”Colors across the wheel from each other are said to be “complementary”

The Color Wheel Careful! There are color models that use Red, Blue and Yellow as primariesCareful! There are color models that use Red, Blue and Yellow as primaries Complementary colors will be different with each modelComplementary colors will be different with each model

The Color Wheel Color “opposites” is a better description!Color “opposites” is a better description!

The Color Wheel Color “opposites” do not work well when placed next to each otherColor “opposites” do not work well when placed next to each other Especially, fully saturated oppositesEspecially, fully saturated opposites Red & Green - Yuk!Red & Green - Yuk!

Readability

Contrast Defined The difference between the “lightest” lights and the “darkest” darks. The highest contrast is black with white

Color Contrast Defined The relative difference between two adjacent colors.

Contrast Types for Color

Hue Contrast Colors have “hue” contrast when they are opposites on the color wheel.

Hue Contrast

If You Must Use Opposites Together Reduce saturation of at least one hue -

Separate with a black or white line - If You Must Use Opposites Together

Separate by distance - If You Must Use Opposites Together

Saturation Contrast Contrast increases as differences in saturation increase -

Saturation Contrast Contrast increases as differences in brightness increase -

Sample Contrast Combinations

The Color Wheel Colors next to each other are said to be “analogous”Colors next to each other are said to be “analogous” Sometimes called “spectral neighborsSometimes called “spectral neighbors They work well as schemesThey work well as schemes

The Color Wheel Good for highlight color combinationsGood for highlight color combinations Not good for fore/background combinations because...Not good for fore/background combinations because...

Spectral Neighbors Have low hue contrast!

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

Spectral Neighbors Work well as shadow or “highlight colors.Work well as shadow or “highlight colors.

Color Triads -Primary Equally spaced around the color wheel Generally, aren’t pleasing combinations

Equally spaced around the color wheel Generally, aren’t pleasing combinations Color Triads - Secondary

Color Categories “Warm” Colors Moderatesaturation - Reds - Oranges - Yellows - Browns

Hot Colors... Can cause viewer fatigue!!

Color Categories “Cool” Colors Moderatesaturation - Blues - Greens

Cool Colors... Can make a viewer passive!

Neutral Colors... Serve a good backdrops for most highlights.

Color Tips Limit the number of hues - some suggest no more 5Limit the number of hues - some suggest no more 5 Goal of color is to enhance design not make a busy, distracting messageGoal of color is to enhance design not make a busy, distracting message

Color Tips Children prefer bright, “fun” colorsChildren prefer bright, “fun” colors They shy away from dark, moody colorsThey shy away from dark, moody colors

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

Color Tips Avoid deeply saturated colors placed next to each other - they tend to shimmer on theAvoid deeply saturated colors placed next to each other - they tend to shimmer on the

Color Tips Bright colors attract attentionBright colors attract attention –good for bullets –buttons –etc But, don’t overwhelm viewerBut, don’t overwhelm viewer

Step 1Step 2 Step 3 Color can highlight steps in a process Color Tips

Emphasize important words or elements with color.Emphasize important words or elements with color. Highlight important words for emphasis

Color Tips

Curriculum Content and Activities created by Dr. Mark Mortensen Dept. of Technology & Cognition University of North Texas Copyright C. Mark Mortensen 2001