Complementary Colors
Two colors that sit opposite each other on the color wheel — the strongest hue contrast in color design, and one of the easiest harmonies to overuse.
Classic complementary pairs
These are the three pairs most often described as “complementary” in color theory. Each pair sits opposite on a traditional 6-hue wheel.
Red ↔ Green
The festive pair. Used heavily in Christmas and warning contexts.
Blue ↔ Orange
The classic sports pair. Also used in film for warm-cool contrast.
Yellow ↔ Purple
The royal pair. High energy, often used in luxury and playful brands.
The 180° rule
On the HSL color wheel, complementary colors sit exactly 180° apart. If you know one hue, the other is easy to compute:
complement = (hue + 180) % 360For example, red at hue 0° → its complement is at hue 180° (cyan). Blue at 220° → its complement is at 40° (amber). Purple at 275° → its complement is at 95° (yellow-green).
Why they feel so intense
Complementary pairs oppose each other in the eye's cone response. When your visual system sees both at once, it amplifies the difference — this is what produces the characteristic "pop". It is also why complementary pairs can feel harsh and cause visual vibration when both colors are shown at full saturation and equal weight.
How to use them well
-
Pick a dominant colorUse one of the two complementaries as the primary color. This becomes 80–90% of the color you see.
-
Use the other as an accentReserve the second color for calls to action, key icons, notifications or emphasis. Small areas, high impact.
-
Vary lightness and saturationA muted complement feels elegant; a full-saturation complement feels aggressive. Most successful designs soften at least one color.
-
Add neutralsTwo complementaries alone are hard to build a UI around. Add a neutral gray scale and one or two tints of each complementary color for a complete system.
Practical examples
- Blue UI with orange CTA — a professional SaaS pattern. Cool, calm base; warm, urgent action button.
- Purple brand with yellow highlights — the "premium" combination. Deep violet with gold is a luxury staple.
- Red alerts on a green success interface — common but dangerous. Combine with icons or labels, because 8% of men cannot distinguish red from green.
- Editorial covers with a cool photo and warm headline — complementary color contrast is one of the oldest magazine tricks.
Accessibility considerations
Complementary colors usually have very different luminances — which means one will always be easier to read against white or black than the other. Red on white is hard to read; green on white is nearly impossible. Always test the specific foreground/background pair you plan to use with the contrast checker.
Also be careful with red/green pairings in error and success states. Add icons, labels or patterns so the meaning is not carried by hue alone.
Frequently asked questions
What are complementary colors?
Two colors that sit opposite each other on the color wheel, approximately 180° apart. Classic pairs are red and green, blue and orange, and yellow and purple. Complementary pairs produce the strongest possible hue contrast.
What is the complementary color of red?
Traditionally, green. On the HSL wheel, the direct 180° complement of red at 0° is cyan. Both conventions are used — traditional color theory pairs red with green for painting and design, while modern color math pairs it with cyan.
Why do they look so intense?
Because each color stimulates the eye's cone cells in opposing ways. When seen together, the visual system amplifies the difference, producing visual "vibration" or pop. This makes complementary pairs feel energetic — and easy to overuse.
Should I use complementary colors in UI design?
Yes, but carefully. Use one complementary color as the base and the other as an accent — never equal weight at full saturation. Add neutrals and vary lightness so the interface stays readable and calm.
Are complementary colors accessible?
Not automatically. Complementaries often have very different luminances — one will read poorly against white or black. Always test the specific foreground/background pair with a contrast checker, and never rely on hue alone to communicate meaning.