1. Design Tips for Using Color

2. 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

3. 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?

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

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

6. Presentation Elements

7. The Color Wheel

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

9. 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

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

11. 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!

12. Readability

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

14. Color Contrast Defined The relative difference between two adjacent colors.

15. Contrast Types for Color

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

17. Hue Contrast

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

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

22. Separate by distance - If You Must Use Opposites Together

23. Saturation Contrast Contrast increases as differences in saturation increase -

24. Saturation Contrast Contrast increases as differences in brightness increase -

25. Sample Contrast Combinations

28. 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

29. 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...

30. Spectral Neighbors Have low hue contrast!

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

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

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

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

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

36. Hot Colors... Can cause viewer fatigue!!

37. Color Categories “Cool” Colors Moderatesaturation - Blues - Greens

38. Cool Colors... Can make a viewer passive!

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

40. 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

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

42. 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!

43. 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

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

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

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

47. Color Tips

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