Building Color Palettes: The Five Schemes and When to Use Them

Color theory schemes are simpler than they sound: each one is a rule for picking hues at fixed angles on the color wheel. The hard part is not generating five colors, it is turning them into an interface that does not look like a paint sample.

The five schemes as hue math

Start with a base hue H on a 0–360° wheel.

Complementary — H and H + 180. Maximum separation, maximum tension. Two colors.
Analogous — H, H - 30, H + 30. Neighbors on the wheel. Low tension, naturally harmonious, weak at signalling hierarchy.
Triadic — H, H + 120, H + 240. Evenly spaced, vivid, hard to balance.
Tetradic — H, H + 90, H + 180, H + 270. Two complementary pairs. The most colors and the most ways to go wrong.
Monochromatic — one hue, varying saturation and lightness. Cohesive by construction.

All five are trivial in HSL and painful in HEX, which is the practical argument for working in HSL while designing and converting to HEX only for handoff.

Choosing a scheme by the job

Monochromatic for products where the content is the point — dashboards, documentation, editors. One hue plus neutrals gets out of the way. Add a single accent hue for destructive actions and you are done.

Analogous for marketing pages and brand-heavy surfaces that need warmth without conflict. Because the hues are close, you must carry hierarchy with lightness and size instead of hue.

Complementary when you need one thing to win. Base hue for surfaces, complement reserved exclusively for the primary call to action. The moment you use the complement in three places it stops meaning "click here."

Triadic and tetradic for data visualization, illustration, and category coding — cases where you genuinely need several colors that are mutually distinguishable. They are a poor fit for general UI chrome.

The 60-30-10 correction

A five-swatch scheme implies equal weight. Interfaces do not work that way. Allocate roughly:

60% — dominant surface, usually a near-neutral derived from your base hue at very low saturation
30% — secondary surfaces, borders, muted text
10% — accent, applied to the single most important action per view

Most palettes that "look wrong" in practice are correctly generated schemes applied at equal weight.

From five colors to a real palette

A scheme gives you hues. A palette needs steps. For each hue you keep, produce a scale by holding hue constant and moving lightness — typically 9 to 11 steps from near-white to near-black.

Two things to watch while you do it:

Saturation should dip in the middle. Mid-lightness steps look muddy if saturation stays flat. Nudging saturation up at the extremes and down in the middle reads cleaner.

Verify the steps you will actually use as text. A scale is useful because it lets you pick the step that passes 4.5:1 rather than compromising the hue. Check it, do not assume it.

Keep the neutrals honest

Pure gray next to a saturated palette looks dead. Take your base hue, drop saturation to 4–8%, and build the neutral scale from that. The tint is barely perceptible in isolation and makes the whole interface feel deliberate.

Try it

Palette Generator — generate all five schemes from one base color and export the result as a PNG swatch sheet
Color Converter — move between the HSL you design in and the HEX you ship
Contrast Checker — validate the steps you intend to use for text
Gradient Editor — blend two scheme colors into a usable CSS gradient

Related reading: HEX vs RGB vs HSL explains why the hue-shift math above only works cleanly in HSL.