Color pairs positioned directly opposite each other on the color wheel, creating the highest possible hue contrast when combined.
Complementary colors are pairs of hues that sit directly opposite each other on the color wheel: red and green, blue and orange, yellow and purple. When placed next to each other, complementary colors create the maximum possible hue contrast, which makes each color appear more vivid and intense than it would in isolation. This phenomenon is called simultaneous contrast.
Classic complementary pairs in design are: blue/orange, red/green, and yellow/purple. Split-complementary schemes use a base color paired with the two colors adjacent to its complement, producing a less stark but still high-contrast combination.
Complementary color combinations are the most effective way to create visual contrast and draw attention. This is why they are so common in brand identities, sports teams, and advertising. The contrast is immediate and unmistakable.
In UI design, a complementary relationship between a background color and an accent color (like a blue interface with orange CTAs) creates clear visual hierarchy. The eye is naturally drawn to the color that contrasts most strongly with its surroundings.
At full saturation, complementary pairs are very intense and can vibrate visually in a way that's uncomfortable for extended viewing. Practical use involves:
Desaturating one of the pair: Use a muted or desaturated version of one color as the background or neutral, reserving the more saturated version for the accent.
Varying lightness: Rather than equal-lightness complements (which creates the most vibration), shift one much lighter or darker than the other.
Using as accent, not fill: Keep the complementary accent to small areas (buttons, icons, badges, highlights) rather than large filled areas.
#1a2a4a) with coral orange CTAs (#FF6B35): complementary, but desaturated and lightness-variedThe vibrating effect (sometimes called 'simultaneous contrast' or 'chromatic aberration') happens because the eye's cone cells are overstimulated at the boundary between high-contrast hues. The brain receives conflicting signals from the two opposing color channels, creating a perceived flicker or shimmer at the edge. It's most pronounced when the two colors have similar lightness values.
A split-complementary scheme takes a base color and pairs it with the two colors on either side of its complement, rather than the complement itself. For example, blue paired with yellow-orange and red-orange instead of straight orange. This gives you the contrast of a complementary scheme with less visual tension. It's a good choice when you want clear accent contrast without the intensity of a direct complement.
In the RGB color wheel (used in digital design), the complement of pure red is cyan (not green), and the complement of green is magenta. In the traditional RYB pigment wheel, red and green are near-complements. In practice, red and green are used as complementary semantic colors (error and success) because of cultural convention, not strict color wheel geometry.