Color Theory for Designers: A Practical Guide
Master color theory fundamentals — the color wheel, harmonies, temperature, and contrast — with practical tips for UI and brand design.
- RGB (not RYB) is the correct model for digital design
- Analogous palettes are easiest to execute; complementary pairs need careful proportion
- Most color mistakes come from ignoring saturation and lightness
- Apply the 60–30–10 rule: dominant / secondary / accent
The Color Wheel
The color wheel organizes hues by their relationships. In the traditional RYB model: Primary colors (Red, Yellow, Blue) cannot be mixed from others. Secondary colors (Orange, Green, Violet) come from mixing two primaries. Tertiary colors (red-orange, yellow-green, etc.) mix a primary with an adjacent secondary.
In digital design, the RGB model is more accurate: Red, Green, Blue are primaries, and mixing all three at full intensity produces white.
Color Harmonies
Harmonies are combinations that feel visually pleasing because of their geometric position on the wheel:
- Complementary — Directly opposite (blue + orange). Maximum contrast. Use sparingly as accents.
- Analogous — Three adjacent hues (yellow, yellow-green, green). Natural, cohesive, low contrast.
- Triadic — Three equally spaced hues (120° apart). Vibrant and balanced, harder to execute.
- Split-complementary — Base + two colors flanking its complement. Less tension than full complementary.
- Tetradic — Two complementary pairs. Rich and complex; needs one dominant anchor color.
Hue, Saturation, and Lightness
Every color lives on three axes:
- Hue — The pure color: red, blue, yellow-green. Measured in degrees (0–360°).
- Saturation — Vividness. 100% is the pure hue; 0% is gray.
- Lightness — Brightness. 0% is black; 100% is white.
Most color errors come from only adjusting hue and ignoring saturation and lightness. A balanced palette keeps S and L consistent within each role — backgrounds, text, accents.
Warm and Cool Colors
Warm colors (reds, oranges, yellows) advance visually — they feel closer and more immediate. Cool colors (blues, greens, purples) recede — calmer and more distant. In UI, warm colors work for primary actions; cool colors suit backgrounds and supporting content.
Tints, Shades, and Tones
- Tint — Adding white (pastel versions).
- Shade — Adding black (deeper versions).
- Tone — Adding gray (more muted, sophisticated versions).
Design systems use this to build color scales — a single hue expanded into 9–11 steps from near-white to near-black.
The 60–30–10 Rule
Apply theory without going literal. Triadic palettes rarely work at equal proportions. Instead: 60% dominant neutral or brand color, 30% secondary, 10% accent. This creates visual hierarchy without chaos.
Explore color harmonies interactively
Generate complementary, triadic, and analogous palettes from any hue