How Color Harmonies Work

A color harmony is a fixed recipe for choosing more than one color so the result looks intentional instead of accidental. The recipes are older than screens and simpler than they look: take one base color and rotate around the color wheel by set angles. Every "designer-looking" palette you have ever admired probably came from one of about five rotations.

The color wheel is the map

Every harmony starts with hue — a color's position on a 360° wheel: reds near 0°, greens around 120°, blues around 240°. Two other properties ride along without steering: saturation (how vivid the color is) and lightness (how much white or black is mixed in, which is the separate craft of tints and shades). The classic harmonies are almost purely a hue game: they keep saturation and lightness steady and move only around the wheel. That is why converting a hex code to HSL is the natural first step — it turns your color into one number you can rotate.

The five classic harmonies, as angles

complementary   +180°                two colors, opposite each other
analogous       −30°, +30°, +60°     neighbors on the wheel
triadic         +120°, +240°         three evenly spaced
tetradic        +90°, +180°, +270°   two complementary pairs
monochromatic   0°                   same hue, varied lightness

Worked example, using the blue #1a73e8 (hue 214°, saturation 82%, lightness 51%):

• Complementary — 214° + 180° = 34°, which lands on the orange #e88f1a. Opposite hues give the strongest possible hue contrast while each color keeps its own character. Blue and orange, purple and yellow, red and green — every "opposites attract" pair you can name sits 180° apart.
• Analogous — the neighbors at 184°, 244°, and 274°: a cyan (#1adae8), an indigo (#281ae8), and a violet (#8f1ae8). Neighboring hues feel calm and cohesive because they share most of their character; this is the scheme of gradients, sunsets, and quiet interfaces.
• Triadic — 334° and 94°: a magenta-red (#e81a73) and a yellow-green (#73e81a). Three hues spread evenly around the wheel feel lively yet balanced — nobody dominates. It is the scheme of playful, primary-color design.
• Tetradic — 304°, 34°, and 128°: a four-color palette built from two complementary pairs at once. The richest scheme, and the easiest to overdo — with four hues fighting for attention, one must clearly lead.
• Monochromatic — no rotation at all. The hue stays fixed while lightness steps up and down (the generator produces steps at 90, 75, 60, 45, 30, and 15%), giving you the safest possible palette and the backbone of most real design systems.

Why these particular angles work

The schemes were codified centuries ago from pigment wheels, but the perceptual logic still holds. Complementary colors feel "complete" together because vision itself manufactures the opposite hue: stare at a saturated blue for thirty seconds and glance at white paper, and a faint orange afterimage appears — the eye's response to blue literally is orange. Analogous neighbors never fight because they share most of their spectral content. And a triad covers the wheel evenly, so no single hue can dominate the visual field. None of this is magic; it is geometry that matches how human vision balances color.

Harmony is not the same as good design

A scheme hands you hues, not a finished design. Two decisions finish the job. First, proportion: the classic 60-30-10 rule gives 60% of the surface to a dominant color (often a near-neutral), 30% to the secondary, and 10% to the accent — equal quantities of complementary colors vibrate unpleasantly. Second, contrast: harmonies move hue while leaving lightness alone, and two different-hue colors at the same lightness can be nearly unreadable together. Text pairing needs the contrast check, not the wheel — the same trap covered in how color contrast works. A saturated blue on its complementary orange can look striking and still fail WCAG 4.5:1 for body text.

From one hex code to a full palette

The mechanics behind a palette generator are exactly the rotation table above: parse the hex color, convert RGB to HSL, add the scheme's angles to the hue (wrapping past 360° back to 0°), hold saturation and lightness constant, and convert back to hex. That is why a palette generated from one brand color feels coherent — every member is the same color, seen from a different side of the wheel. When you want variations in lightness rather than hue, that is the tints-and-shades tool instead; using both together (harmonies for hue, tints and shades for depth) is how a two-color brand expands into a full interface.

Try it yourself

Pick a starting color with the Color Picker, paste it into the Color Palette Generator to see all five harmonies computed from it at once, then generate matching lightness steps of any member with the Color Shade Generator. Before committing any pairing to text, check the contrast ratio — the wheel guarantees harmony, not legibility.