Understanding Color Harmony: 7 Ways to Combine Colors

Color harmony is a set of patterns on the color wheel that reliably produce colors that work together. Pick a base color, apply a pattern, and you get a starting palette in seconds. The seven patterns below run from the calmest to the most colorful. Each one uses the same teal as its base, so you can compare them directly.

1. Monochromatic

A monochromatic palette uses one hue in several lights and darks. It's the safest rule, and it looks calm and polished, but it needs enough difference between its steps to keep text and buttons easy to tell apart. Use it for interfaces, documents and minimal brands.

2. Analogous

Analogous colors sit side by side on the wheel. They share so much that they blend easily, like the blues and greens of the sea. The palette feels natural and low in tension, so choose one color to lead and let the others support it.

3. Complementary

Complementary colors sit directly opposite each other, which gives the strongest hue contrast on the wheel. Used at full strength in equal amounts they can feel harsh, so let one dominate and use the other as an accent. Buttons and calls to action are a classic use.

4. Split complementary

Split complementary replaces the direct opposite with the two hues on either side of it. You keep much of the energy of a complementary pair with less tension, which makes it a forgiving choice when you want contrast but find complementary too strong.

5. Triadic

A triadic palette uses three hues spaced evenly around the wheel. It's lively and balanced, so it suits playful brands, illustration and children's products. Three strong hues compete easily, so pick one to lead and quieten the others with tints or lower saturation.

6. Tetradic (square)

This rule uses four hues spaced evenly around the wheel, forming a square. It offers the most variety of any rule here and is the hardest to balance. It works best when one color leads and the rest appear in small amounts.

Names vary between tools. Some use tetradic for any four-color scheme, including the rectangle below. In the ColorOverflow generator, Tetradic means this evenly spaced square.

7. Double complementary (rectangle)

A double complementary palette uses two complementary pairs, forming a rectangle on the wheel. Because the pairs sit closer together than in a square, two hues on each side feel related, which makes it a little easier to balance. The generator doesn't have this rule yet, but the palette below opens there so you can adjust it.

How to choose a rule

• For calm and refined, start with monochromatic or analogous.
• For one thing that has to stand out, use complementary or split complementary.
• For playful and colorful, use triadic.
• For a large system with many categories, try tetradic or double complementary.

Whichever you choose, try it in the generator with your own base color, then adjust lightness and saturation until it fits your project.