1 / 24

Color in Design

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

sofia
Download Presentation

Color in Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Color in Design

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

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

  4. Spectrum & Hue • SPECTRUM: All the possible colors in a color space • HUE: specific location on color wheel or in color spectrum

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

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

  7. Contrast CONTRAST: separation between values. Text color must contrast with background to be readable. High Contrast is easy to read… Low Contrast is often difficult to read….

  8. The Color Wheel • There are 12 hues in the spectrum of color. • They are divided into three categories…

  9. The Primary Colors • Red, Yellow, and Blue • These colors cannot be combined from mixing any colors together.

  10. The Secondary Colors • Green, violet, and orange • Made by combining the Primary colors together.

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

  12. Another look • Color wheels show how colors are related – imagine a circular rainbow spectrum (of course many hues can exist on this spectrum) Secondary Tertiary Primary

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

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

  15. Complementary colors • opposites on the color wheel

  16. Monochromatic • Single hue with different values of that hue

  17. 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)

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

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

  20. Tips for Designing with Color 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

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

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

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

  24. Complementary Grayscale Analogous Monochromatic

More Related