Color Theory
A complete guide to the color wheel, primary and secondary colors, harmonies, temperature and the difference between tints, shades and tones — with practical examples for designers and developers.
Start here
The foundations — the color wheel and the primary, secondary and tertiary colors built from it.
Color Wheel
How the wheel is organized, and why it is the foundation of every harmony.
Primary Colors
RGB and CMY — the two primary systems that actually exist in modern color.
Secondary Colors
The three colors you get from mixing two primaries equally.
Tertiary Colors
The six intermediate colors between primary and secondary.
Harmonies
Named relationships between colors on the wheel. Each produces a different visual character.
Complementary
Two colors opposite each other — maximum hue contrast.
Analogous
Adjacent hues on the wheel — calm and cohesive.
Triadic
Three colors evenly spaced 120° apart — vibrant and balanced.
Tetradic
Two complementary pairs forming a rectangle — rich but demanding.
Split Complementary
Base plus the two colors adjacent to its complement — strong but nuanced.
Monochromatic
One hue with varied lightness and saturation — elegant and calm.
Working with color
How to adjust, combine and think about colors in practice.
Tint, Shade & Tone
The three ways to modify a color: add white, add black, add gray.
Warm vs Cool
How temperature changes the emotional character of a design.
Color Contrast
Why some color pairs vibrate and others feel calm together.
Color Temperature
Warm and cool as a gradient — and how to balance both sides of the wheel.
The color wheel at a glance
A simplified version of the classic 12-part color wheel used in art and design:
| Category | Colors | Angle on wheel |
|---|---|---|
| Primary (RYB, traditional) | Red, Yellow, Blue | 0°, 60°, 240° |
| Secondary | Orange, Green, Violet | 30°, 120°, 300° |
| Tertiary | Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet | Every 30° between primaries and secondaries |
How to apply color theory
-
Decide the messageChoose a hue family that matches the feeling you want — red for urgency, blue for calm, yellow for optimism, green for growth.
-
Pick a dominant colorChoose one primary hue. This will carry most of the visual weight.
-
Add a harmonyUse one complementary, split-complementary or analogous color as an accent. Keep the number of hues small — most good interfaces use two or three.
-
Build neutralsAdd a warm, cool or neutral gray scale for surfaces, borders, text and backgrounds. Neutrals do most of the work in any interface.
-
Check contrastEnsure every foreground/background pair passes WCAG AA (4.5:1 for body text). Harmony does not guarantee readability.
Frequently asked questions
What are the three primary colors?
There are two relevant sets. On screens (additive), the primaries are red, green and blue (RGB). In printing (subtractive), they are cyan, magenta and yellow (CMY). The older RYB (red-yellow-blue) model is still taught in art classes but does not match the physical behavior of either screens or modern print.
What is a complementary color?
Two colors are complementary when they sit opposite each other on the color wheel. Classic pairs are red and green, blue and orange, yellow and purple. Complementary pairs produce the strongest possible hue contrast — useful for emphasis, but easy to overuse.
What is the difference between analogous and monochromatic?
Analogous uses neighboring hues (typically ±30°). Monochromatic uses a single hue with varying lightness and saturation. Analogous feels more colorful; monochromatic feels more restrained.
How do I use color theory in web design?
Most interfaces use one dominant hue, a neutral palette and a single accent. Pick a primary color for actions, a neutral scale for surfaces and text, and one harmonious accent for secondary emphasis. Then check contrast — harmony and accessibility are separate concerns.
Is the color wheel still relevant?
Yes, with a caveat. The traditional RYB wheel is a conceptual tool for thinking about hue relationships. Actual color math on screens happens in RGB, and perceptual color spaces like OKLCH describe colors much more accurately. Both views are useful — the wheel for intuition, and color spaces for precision.