Color Theory Fundamentals: A Practical Guide for Designers
Color theory is the working knowledge of how colors relate: the wheel, the dimensions of color, and the psychology of combinations. You don't need paint-mixing history — you need the handful of principles that decide whether a palette feels intentional or accidental.
The three dimensions of every color
| Dimension | Question it answers | Tool |
|---|---|---|
| Hue | Which color family? | Wheel angle 0–360° |
| Value / lightness | How light or dark? | L in HSL/OKLCH |
| Chroma / saturation | How vivid or muted? | S or C |
Beginners over-index on hue. Professionals control value first — a design converted to grayscale should still have clear hierarchy. If your grayscale looks flat, no hue choice will save it.
Warm, cool, and context
Reds through yellows advance and energize; blues through greens recede and calm. But color is relentlessly contextual: the same gray looks bluish on orange and orangish on blue (simultaneous contrast). Always judge colors inside the actual design, never in isolation swatches.
The 60-30-10 rule
A reliable starting distribution: 60% dominant (usually a neutral), 30% secondary, 10% accent. Interfaces often stretch to 90% neutral / 10% brand — restraint is what makes the accent powerful. Explore relationships between hues in our color harmony guide, generate options with the palette generator, and verify legibility with the contrast checker.