Color harmony

The rules of thumb for picking colors that look intentional together, mostly based on how far apart their hues sit on the wheel.

colors that go togetherwhich colors matchcolor theory rulescolor combinations that workcolour harmonycolor scheme ruleshow do I pick colors that don't clashmatching colours

See it

Live demo coming soon

What it is

Color harmony is the small set of recipes for combining hues based on where they sit on the wheel. The named ones: monochromatic (one hue), analogous (neighbors), complementary (opposites), split-complementary (an opposite's two neighbors), triadic (three evenly spaced), and tetradic (two complementary pairs). Each shape carries a mood, from quiet to loud in roughly that order.

Reach for harmony when you are stuck, not when you are finishing. The recipes do not make a palette good; they hand you a starting set that will not look accidental, which you then edit by eye. Almost every real palette breaks its own geometry by a few degrees, and that is fine.

Gotcha: harmony is a hue game, and hue is the least load-bearing variable in a working interface. Two perfectly harmonious colors at the same lightness will still fail contrast and still make text swim. Screenshot the design, desaturate it, and see whether the hierarchy survives. Getting the proportions right (60% dominant, 30% secondary, 10% accent) usually does more for a layout than any amount of angle math.

Ask AI for it

Build a color scheme using an analogous harmony. Use the current primary color as the anchor, call its hue H, and derive the set from H minus 30 degrees, H, and H plus 30 degrees, stating which color space the angles are measured in. Give the three hues the roles dominant, supporting, and accent, then vary lightness and chroma so no two colors land at the same lightness. Apply a 60/30/10 split: the dominant at low chroma across large surfaces, the supporting color for secondary areas, and the accent in small doses for actions. Return OKLCH plus hex, label each color's role (background, surface, border, body text, accent), and confirm every text-on-background pair clears 4.5:1 contrast.

You might have meant

color wheelcomplementaryanalogousmonochromatic60 30 10 rule

Go deeper