Color Theory

Color Theory 101

Hue – Color in its purest form.

Saturation – intensity of color expressed as the degree to which it differs from white.

Value – how light or how dark the color is.

Contrast

The degree to which colors differentiate from each other in terms of their hue, saturation and color.

If contrast is too high it can cause strain on the eye of the user.

If contrast is too low – low contrast limits legibility.

Color Wheel

Primary, Secondary & Tertiary Colors

Primary Colors are Blue, Red & Yellow

Secondary colors are created by mixing two adjacent primary colors.

  • Primary + Primary = Secondary
  • Blue + Yellow = Green
  • Red + Yellow = Orange
  • Blue + Red = Purple

Tertiary colors made by mixing Adjacent Primary and secondary colors.

  • Primary + Secondary = Tertiary Color
  • Blue + Purple = Blue Violet
  • Red + Purple = Red Violet
  • Red + Orange = Red Orange
  • Yellow + Orange = Yellow Orange
  • Blue + Green = Blue Green
  • Yellow + Green = Yellow Green

Color Combinations

Monochromatic

Light and dark values and tones of a single color.

Use tints, shades and tones as complementary colors.

Triads

Taking three colors that are adjacent from one-another.

Analogous

Taking three colors next to each other.

You choose a main color and then select the two colors either side.  If yellow was your main color you’d also have green and orange as your complementary colors.

Complementary

Two color on opposite sides of the pallet.

When placed together the boarder can look like its vibrating which can be jarring.  So break the colors up with neutral colors or find different tints and tones of the color to avoid this.

Split Complements

Taking one color and selecting the complementary colors either side of the color directly opposite.

Square Colors

The square color model takes four colors evenly spaced around the color wheel. In the example above, the colors are blue, orange, red-violet, and yellow-green. This color scheme is really nice and would work well with one strong color and muted versions of the other colors.

Tetradic Colors

Tetradic color schemes are built by creating a rectangle on the color wheel. Select two opposites on the color wheel and then select another color two spaces over and its compliment across the color wheel.

Tints & Shades

A tint of a color is when you take a color, such as blue, and add white to it. A shade is a hue that has black added to it. You can create a monochromatic color scheme buy using tints and shades of the same hue.

Warm Colors

Warm colors (Red > Yellow) create a sense of warmth and heat in an image or a design. When you see warm colors, you think of the sun, heat, fire, and love (passion). Red is the color of blood, which is warm, and orange and yellow go along with summer. Adding an orange photo filter to an image instantly makes it look warmer and happier.

Cool Colors

Cool colors (Purple > Green) carry connotations of cool climates, winter, death, sadness, ice, night, and water. Cool colors can be associated with calmness, tranquility, trust, cleanliness. Purple is associated with royalty, because they are supposed to be reserved.

Psychology of Color

Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness, the sunlight, joy, and warmth.

Green. The color of nature which brings calming and renewing feelings.

Blue. It often represents some corporate images. May be associated with distance and sadness.

Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.

Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.

White. The color means purity and innocence, as well as wholeness and clarity.

Selecting UI Colors

A simple strategy for selecting web pallet is to select a hero image and accent color and support with neutrals.

This pallet would look like this:

  • Hero Color
  • Accent Color
  • White
  • Dark gray
  • Light gray

Color Tools

Further Reading

Visual Design Resources

TYPES & FONTS

  • Google Fonts: hundreds of high-quality open-source web fonts. (You can download .ttf fonts by adding fonts to your collection and clicking the download arrow in the top right of the screen.)  http://www.google.com/fonts/

COLOR

GRIDS

PHOTOGRAPHY

The following are a few collections of free high-quality images that you may download and incorporate into your designs.

ICONS & SYMBOLS

  • FontAwesome: a web-friendly, open-source icon font. You will need to open “glyphs” under the type menu in Illustrator to access these icons.  http://fontawesome.io/
  • The Noun Project: another source for creative commons (open-source) icons. You will need to search for individual icons and download them one at a time as either png files if you are working in Photoshop, or svg files if you are using Illustrator. To gain free access to these icons, you will need to create an account and agree to attribute the icon designer in your design. For the purposes of this class, you may assume that your client would pay for the icon, so attribute the icon designer in your presentation deck, not in your polished landing page design.  http://thenounproject.com/
  • Material Design Baseline Icons: https://material.io/tools/icons/?style=baseline
  • Font Awsome Icon Cheatsheet: https://fontawesome.com/cheatsheet?from=io

VISUAL DESIGN INSPIRATION

 

Lorem Ipsum Sample Copy

The standard Lorem Ipsum passage, used since the 1500s

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Section 1.10.32 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”