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