Complementary colors, explained with examples
Complementary colors are the most powerful pairing on the wheel and the easiest to get wrong. The fix is proportion — and it is easier to see than to explain.
The pairs
Each pair sits 180° apart. Placed next to each other they make each other look more saturated, which is exactly why sports teams and movie posters love them. The opposites below are computed, not picked:
Why they clash
Two saturated complements at equal size and equal lightness create a vibrating edge the eye cannot rest on. When ColorSwoop filters palettes it rejects exactly this case: two vivid colors far apart in hue with similar lightness.
The 80/20 rule
Let one color own the design and use the complement for the 10–20% that needs attention: a button, a headline underline, a single illustration element. Also separate them in lightness: a deep navy with a light peach reads as sophisticated; the same navy with an equally dark orange reads as a warning sign.
#F2F4F8Blue · 30% #1F5FBFOrange · 10% #FFB347Softer alternatives
Find the complement of any color
FAQ
What are complementary colors?
Two colors directly opposite each other on the color wheel, such as blue and orange, red and green, or purple and yellow. Placed together they intensify each other.
Why do complementary palettes often look garish?
Because both colors are used at full saturation and equal size. Fix it by making one dominant and one a small accent, and by muting or lightening one of the two.
What is split-complementary?
Instead of the exact opposite, you take the two hues either side of it. It keeps the contrast but is easier to balance, which is why many designers prefer it.