Color Harmony Generator

The five harmony types

Complementary takes the hue 180 degrees opposite. It gives the strongest contrast available at the same lightness, which makes it good for a single accent and bad for large adjacent areas, where it vibrates.

Analogous takes neighbours within about 30 degrees. Low tension, naturally cohesive, and the safest choice when you want a scheme to feel like one thing.

Triadic spaces three hues 120 degrees apart, tetradic uses two complementary pairs, and split-complementary swaps the direct complement for its two neighbours to keep the contrast while dropping the vibration.

Applying a harmony without it looking loud

Harmony sets give you hues, not a design. The usual failure is using all of them at equal weight. Weight them instead: roughly 60 percent dominant, 30 percent secondary, 10 percent accent. Most palettes that look wrong are correctly harmonised and badly proportioned.

Frequently asked

What is the difference between complementary and split-complementary?

Complementary uses the single hue directly opposite on the wheel. Split-complementary uses the two hues either side of it instead. You keep most of the contrast but lose the optical vibration that direct complements cause when placed adjacent.

Which color harmony should I use for a website?

Analogous for a calm, cohesive feel, with one complementary accent for buttons and links. That gives you cohesion across the page and one color that unambiguously means 'click this'.

Do color harmonies guarantee good contrast?

No. Harmony is about hue relationships and says nothing about lightness. Two complementary colors at the same lightness can be nearly unreadable together. Check any text pairing with a contrast checker.

What is a triadic color scheme?

Three hues spaced evenly at 120 degrees around the wheel. It is vivid and balanced, but needs one clearly dominant color with the other two used sparingly, or it reads as chaotic.