Two colours from opposite sides of the colour wheel — a classic high-contrast pairing.
Hues separated by 180° on the hue wheel.
Complementary pairings are high hue-contrast, not necessarily high lightness-contrast — the two colours can still be similar in lightness.
Blue and orange, or red and green, are complementary pairs.
Complementary pairings are one of the calculated categories on every What Goes With This Colour? result.
A complement is defined by a rule, and the answer depends on which wheel the rule is applied to. Colourwise adds 180° to the HSL hue, the wheel of screen primaries, on which red faces cyan. The painter's red-yellow-blue wheel puts red opposite green. A physical definition also exists: two lights are complementary when mixing them gives white, and two paints when mixing them gives a neutral grey.
| Base | Base hue | Complement | Complement hue | Contrast ratio |
|---|---|---|---|---|
| Cobalt Blue #0047ab | 215° | #ab6400 | 35° | 1.83:1 |
| Red #ff0000 | 0° | #00ffff | 180° | 3.19:1 |
| Yellow #ffff00 | 60° | #0000ff | 240° | 8.00:1 |
Cobalt blue's complement is #ab6400, an orange-brown of the same HSL lightness, and the pair has a contrast ratio of only 1.83:1. Red and its complement #00ffff manage 3.19:1. Opposite hues guarantee the strongest hue difference and nothing else, so text in one complement on the other can be unreadable.
How this was calculated: Complements are the base colour with 180° added to its HSL hue, saturation and lightness unchanged; the ratio is the WCAG contrast ratio of the two HEX values.
A painter mixes a colour with its complement to darken it without using black.
The mixture heads for grey or brown, which is the intention, but the complement has to be the pigment's real opposite. Taking it from a screen wheel gives red and cyan where the palette needs red and green, and the mixture misses neutral.
A call-to-action button uses the complement of the page's main colour.
It stands out by hue and may still fail contrast with its own label or with the background. Check the pair in the contrast checker before relying on it.