What Are Complementary Colours, and Why Do Designers Use Them?
Complementary colours sit directly opposite one another on the colour wheel. That is the whole definition, and the reason it matters is that opposite colours produce the strongest contrast two hues can manage. The Complementary Colour Finder gives you the opposite of any colour instantly.
The arithmetic
Hue in HSL is a position on a 360-degree wheel, so the complement is simply the base hue plus 180, wrapping around at 360. A hue of 30 - orange - gives 210, which is blue. Red gives green. Yellow gives purple.
That is why HSL is the format to think in for colour theory. In HEX the relationship is invisible.
What this pairing is good for
Emphasis, and not much else. A complementary accent against a dominant colour is the most reliable way to make one element unmissable - a call-to-action button, a notification dot, a highlighted figure in a chart.
The mistake is using the pair in equal amounts. Two opposite colours at similar saturation and similar area fight each other, and the eye finds nowhere to rest. The usual guidance is something like nine parts base colour to one part complement: the complement works as a punctuation mark, not a second voice.
Where it goes wrong
Red and green together are the classic trap, because the most common forms of colour blindness affect exactly that pair. If your success and error states differ only by those two colours, a meaningful share of your readers cannot tell them apart. Add an icon or a label, and check the result with the Colour Blindness Simulator.
High contrast also does not mean readable. A complement is the right colour for a button and often the wrong colour for text on that button - run the pair through the Contrast Checker before committing.
Why the pairing vibrates
Put two complements side by side at full saturation and the edge between them appears to shimmer. This is a genuine effect of how the eye processes opposing hues at the same brightness, not a rendering artefact, and it is why some complementary designs are tiring to look at.
The fix is to break the symmetry. Change the lightness of one so they are no longer competing at the same level, reduce the saturation of the background one, or simply put a neutral between them - a white or grey gap removes the effect entirely.
Designers use this deliberately in posters and album covers, where a little visual tension is the point. In an interface somebody reads for an hour, it is something to avoid.
Common questions
Is there anything softer than a straight complement?
Yes - split complementary uses the two colours either side of the opposite, which keeps most of the contrast with less tension. A triadic scheme is gentler again.
Is the complement of a colour the same in print?
Not quite. Print uses a different colour model, so the traditional artist's wheel gives red and green as complements where the screen model gives red and cyan.
Can grey have a complement?
Not meaningfully. Grey has no hue to rotate, so the arithmetic returns grey.
Find the opposite of your colour: