ColorPickerTools

Color Theory Basics: The Color Wheel and Harmonies

Color theory is the small set of relationships that make two or three colors look deliberate together. You do not need to memorise it — the color wheel shows the relationships visually, and a few names (complementary, analogous, triadic) cover most decisions.

Quick answer: The color wheel arranges hues in a circle. Colors opposite each other are complementary (high contrast), neighbours are analogous (calm), and three colors 120° apart form a triadic scheme (balanced). Most palettes are built from one of these relationships plus neutral greys.

The wheel is a map

Hue is circular: 0° and 360° are the same red. That is why relationships are described as angles — 180° is the opposite color, 30° away is a near neighbour. Saturation and lightness are separate axes, which is why a wheel alone is not enough to describe a color.

The main harmonies

  • Complementary — opposite hues (180°): strongest contrast, good for accents and calls to action.
  • Analogous — neighbours (within ~30°): calm and cohesive, good for backgrounds and large surfaces.
  • Triadic — three hues 120° apart: balanced variety without a dominant pair.
  • Split-complementary — a hue plus the two either side of its complement (150° and 210°): contrast with less vibration.
  • Monochromatic — one hue at different lightness and saturation: depth without introducing a new hue.

Contrast is not the same as harmony

Harmony decides which hues go together; contrast decides whether text is readable. A harmonious palette can still fail accessibility, so always check the contrast ratio of text against its background — aim for 4.5:1 for body text.

A practical method

Pick one dominant hue and a neutral (near-black, near-white, grey). Add a complementary accent for actions. Keep the accent's area small so it reads as a highlight rather than a second theme. Generate the shades you need from the dominant hue by varying lightness rather than inventing new colors.

Frequently Asked Questions

How many colors should a palette have?
A workable UI palette is usually one primary hue, one accent, plus two or three neutrals and their shades — roughly five families, not five arbitrary colors.
Do complementary colors always look good together?
At full saturation they can vibrate uncomfortably. Use one as an accent at a smaller area, or reduce saturation.
Is the color wheel the same for print?
The classic artist's wheel is a tradition; on screen the hue circle is consistent with HSL. For print, finish choices against the CMYK gamut.

Related Tools