In A Nutshell, What is Color Theory? The interaction of colors in a design through complementation contrast vibrancy.

Transcription

1 Color Theory Adapted from and

2 In A Nutshell, What is Color Theory? The interaction of colors in a design through complementation contrast vibrancy.

3 Complementation the way we see colors in terms of their relationships with other colors. balances different colors across the color spectrum establishes a "happy medium" the eye can reside in without straining

4 Contrast reduces eyestrain focuses user attention by clearly dividing elements on a page

5 Contrast: Text/Background Best practice is usually to choose a very light color for the background, and a very dark color for the text itself. Large text areas aren t a place to try to be really creative so keep it simple and legible.

6 Contrast, cont'd Contrast draws the viewer s attention towards specific elements of a page. Like highlighting a textbook The same principle applies to Web Design: Using a variety of contrasting colors can help focus the viewer s attention on specific page elements.

7 Contrast: Page Elements If your website has a dark background, focus on the main content with a lighter color.

8 Contrast: Dark Page Elements Conversely, if your web page has a lighter background, consider a dark background for the main content

9 Vibrancy Dictates the emotion of your design. Brighter colors: more energetic as a result of your design invoke stronger emotional responses Darker shades: relax the user, allowing their mind to focus on other things.

10 Vibrancy examined CNN s website features a stark red banner across the top, which leads to heightened emotions from users as they are stimulated by the vibrancy of the design (and the contrast between red, white, and black- the primary color scheme of the website). Ars Technica utilizes a darker color scheme for its background and header to relax the user and focus their attention towards their content. By doing so, their technical and detailed writing is considered the forefront of the site.

11 Choosing an Effective Color Scheme Triadic Compound Analogous

12 Triadic Color Scheme Composed of 3 colors on separate ends of the color spectrum. Create it by: 1. Take a color wheel, and choose your base color. 2. Draw an Equilateral Triangle from this point. 3. The three points of the triangle will form your tri-color scheme. By using an Equilateral Triangle, you can ensure the colors have equal vibrancy and compliment each other properly.

13 Compound Color Scheme Based on providing a range of Complementary Colors Two colors are chosen from opposite ends of the color spectrum. Allows more freedom in the design while also benefiting from the visual appeal of complementary colors.

14 Analogous Color Scheme Based on a careful selection of colors in the same area of the color spectrum. Usually the colors are differentiated by their vibrancy, and their contrast when compared to each other. Two examples of an Analogous color scheme are: 1. Shades Yellow and Orange 2. A Monochromatic Selection

15 Color Scheme Tools Don't pick color schemes by hand! There are plenty of tools to help you build color schemes around your design.

16 Color Scheme Designer 3 Dead simple selector, lets you pick between different color schemes (even a few we haven't covered yet), and advanced palette adjustment.

17 Adobe Kuler A more advanced way to create a color palette. Every color on the palette can be individually modified, or chosen as the base color. Additionally, there's a community of people who create palettes for inspiration.

18 Adjusting color schemes You probably don't need to do this But just in case, here's some tips & tricks (After the colors are in hexadecimal form!)

19 Adjusting color schemes Warming up or cooling down a background Neutral backgrounds may be easy to read against, but neutral doesn t have to mean bland. Adjusting the first and last byte can make a background subtly warmer or cooler. # neutral # warmer # cooler

20 Adjusting color schemes Warming up or cooling down a background Is that too much? For a more subtle shift, use the ones places instead: # neutral #4F4040 warmer #40404F cooler

21 Adjusting color schemes Deriving new coordinating colors from the existing color scheme: