Complementary colors: contrast that still feels balanced

Complementary colors are two hues that sit directly opposite each other on the colour wheel, like blue and orange, red and green, or yellow and violet. Each makes the other look more intense, which is why complementary pairs give the strongest colour contrast available. Used carefully, that contrast makes a single element impossible to miss. Used evenly and at full strength, it makes a design uncomfortable to look at.

Which pairs count as complements depends on the wheel. The painter's wheel pairs blue with orange; the screen wheel pairs blue with yellow. The colour wheel guide explains the difference. The pairs below are the ones designers use most.

Complementary colour pairs, with codes

Why complementary colours vibrate

Put two complements of similar lightness and full saturation next to each other and the edge between them seems to flicker. Your eyes cannot settle on where one ends. The effect is strongest with red and green or blue and orange at equal intensity, and it makes text in one colour on the other very hard to read.

The fix is almost never to change the hues. Make one of them much darker or lighter, or much less saturated. The pair stays complementary, but the edge stops fighting. This also solves readability, because text needs lightness contrast more than hue contrast; see colour contrast.

How to use complementary colours: one leads, one accents

The most dependable approach is to give one colour most of the space and the other a small, important job: a button, a price, a single word, a sticker. The accent draws the eye because it is the only thing of its kind. Half and half, by contrast, splits attention and rarely looks planned.

• Dominant colour: backgrounds, large shapes, most of the surface. Usually the darker or quieter of the pair.
• Accent colour: calls to action, highlights, one key number. Usually the brighter one.
• Neutrals: near-white, near-black or a warm grey to give both room. Few good complementary designs are only two colours.
• Proportion guide: the 60-30-10 rule is a useful starting point, with the complement as the 10.

Complementary gradients without the grey middle

Blend two complements directly and the halfway point turns grey or brown. In the sRGB colour space most tools use, the red, green and blue values of two opposites average to something close to neutral. It is one of the most common gradient mistakes.

The two strongest fixes are a midpoint stop in a hue between the pair and interpolation in OKLCH, which moves around the colour wheel instead of cutting across it. Muddy gradients and OKLCH gradients in CSS explain both in detail.

Where complementary palettes work best

Complements suit work that has to be noticed quickly and read at a distance. They are less suited to long reading, calm interiors or anything meant to feel quiet, where analogous colours do better.

• Calls to action. A warm button on a cool page, or the reverse, is the classic use. It is found without searching.
• Sport and events. Team kits, posters and tickets use opposite colours because they read from across a stadium or a street.
• Food and retail. Food styling often sets warm dishes against cool plates or backgrounds so they stand forward; a sale sticker in the complement of the packaging stands out on a shelf.
• Data and maps. Two opposite hues show two sides of a comparison clearly, as long as labels back them up for readers who see colour differently.
• Portraits and product shots. A background in the complement of the subject's main colour separates it without a hard outline.

Complementary colour mistakes to avoid

If a complementary pair feels too tense even when balanced, try split-complementary: one hue plus the two either side of its opposite. It keeps the energy and softens the clash. Triadic and split-complementary palettes shows how.