Color Theory: A Complete Beginner's Guide

Color theory is a practical set of ideas for choosing colors that work together. It explains how colors relate to one another, why some combinations feel calm or energetic, and how to change a color without losing control of it. You don't need to be an artist to use it. A handful of concepts covers most everyday design decisions.

The color wheel

The color wheel arranges hues in a circle, so the relationship between any two colors is easy to see. Colors next to each other look related, and colors on opposite sides stand out against each other. Nearly every palette technique is a pattern on this wheel.

Primary, secondary and tertiary colors

Primary colors are the starting points of a color system. Secondary colors come from mixing two primaries, and tertiary colors come from mixing a primary with a neighboring secondary. Which colors count as primary depends on the medium, which is why you may have seen more than one answer.

• Screens use red, green and blue. Light is added together, and all three at full strength make white.
• Printing uses cyan, magenta and yellow, usually with black. Inks absorb light, so layering them gets darker.
• Traditional painting teaches red, yellow and blue, the model most art classes start with.

If you design for screens, think in RGB, but the relationships between hues on the wheel are what you'll use day to day.

Hue, saturation and lightness

Any color on a screen can be described by three properties. Together they're known as HSL, and they're the easiest way to think about changing a color on purpose.

• Hue is the color family, such as red, teal or violet. It's a position on the wheel, written as an angle from 0 to 360 degrees.
• Saturation is how vivid the color is. At 100% it's as intense as it gets, and at 0% it's a gray.
• Lightness is how close the color is to black or white. In HSL, 0% is black, 100% is white, and 50% is the purest version of the hue.

This is useful because each property changes one thing. If a blue feels too loud, lower the saturation and it's still the same blue. If it's too heavy, raise the lightness.

Tints, shades and tones

These three words describe the most common ways of varying one color, and they're the basis of every design system's color scale.

• A tint is a color mixed with white, which makes it lighter and softer.
• A shade is a color mixed with black, which makes it darker and deeper.
• A tone is a color mixed with gray, which makes it quieter and less saturated.

Warm and cool colors

Reds, oranges and yellows are usually described as warm. Blues, greens and violets are usually described as cool. Warm colors tend to feel active and appear to come forward, while cool colors tend to feel calm and recede. That makes temperature a simple tool for directing attention: a small warm accent on a cool layout is hard to miss.

Why context changes a color

A color never appears alone. The same gray looks lighter on a dark background and darker on a light one, and a saturated color can look brighter next to something muted. This effect is called simultaneous contrast, and it's why a swatch that looks right in isolation can feel wrong in a layout. Always judge colors in place, next to the ones they'll be used with.

Where to go next

You now have the vocabulary: the wheel, HSL, tints and shades, and temperature. The next step is learning the patterns that turn those ideas into palettes, which is what color harmony is about.