Complementary Colors
Complementary colors are pairs that sit directly opposite each other on the color wheel, 180° apart. Side by side they create the strongest contrast available; mixed together they neutralise into grey or brown. Below are the classic pairs, a full chart of complements with hex codes, and how to use them without clashing.
The three classic complementary pairs
Red ↔ Green
#D6212B · #2E7D32
The most recognisable pair — high energy, used everywhere from holiday branding to sports kits.
Blue ↔ Orange
#1F4EA1 · #F07818
The classic film-poster combination: cool shadows against warm skin tones.
Yellow ↔ Purple
#F5D211 · #6B2FA0
The strongest value contrast of the three primary pairs — bright against dark.
Complementary color chart
Each color paired with its exact opposite on the wheel. Click a color for its full palette.
#9CAF88 ↔ #9B88AF
#1B2A4A ↔ #4B3C1B
#FF7F50 ↔ #52D1FF
#DEA5A4 ↔ #A5DEDF
#E1AD01 ↔ #0135DF
#008080 ↔ #800000
#800020 ↔ #008060
#E2725B ↔ #5ACBE2
#C4A29E ↔ #9DBFC3
#98FF98 ↔ #FF99FF
#B497BD ↔ #A1BD98
#708238 ↔ #493781
#E0B0FF ↔ #D1FFB3
#36454F ↔ #4F4036
#FFFDD0 ↔ #D1D3FF
#FFDAB9 ↔ #B8DEFF
#228B22 ↔ #8C228C
#B7410E ↔ #0E86B9
#6A5ACD ↔ #BECD5B
#50C878 ↔ #C851A0
#F5F5DC ↔ #DBDBF5
#800000 ↔ #008080
#40E0D0 ↔ #E03E4E
#FA8072 ↔ #70ECFA
#8E4585 ↔ #448D4C
#C3B091 ↔ #92A5C3
#D4AF37 ↔ #355AD4
#B76E79 ↔ #6CB7AB
#0047AB ↔ #AD6500
#C8A2C8 ↔ #A2C8A2
#7B3F00 ↔ #003B7A
#FF00FF ↔ #00FF00
#CCCCFF ↔ #FFFFCC
#355E3B ↔ #5F3558
#483C32 ↔ #323E48
#007BA7 ↔ #A82D00
#FBCEB1 ↔ #B1DEFB
#614051 ↔ #416251
#B0E0E6 ↔ #E7B8B1
#DC143C ↔ #14DBB4
How to use complementary colors
Use an 80/20 split. Let one color dominate and use its complement only for accents — buttons, highlights, a single element you want noticed. Equal amounts of two complements fight for attention and read as tense.
Mute one side. Adding grey or white to one of the pair keeps the contrast while dropping the vibration you get between two fully saturated complements.
Avoid complementary text on backgrounds. High hue contrast is not the same as high value contrast — red text on green fails accessibility badly. Check any pairing with a contrast checker before using it for text.
Use complements to darken naturally. Instead of adding black, add a touch of a color's complement. It darkens while keeping the color alive — see the color mixing guide.
Other color harmonies
Split-complementary — the two colors either side of the complement. Nearly as much contrast, noticeably less tension.
Analogous — neighbours on the wheel. Calm and cohesive, good for backgrounds and gradients.
Triadic — three colors evenly spaced. Vibrant but balanced.
Monochromatic — one hue at different lightness levels. The easiest palette to balance.
Frequently asked questions
What are complementary colors?
Complementary colors are pairs that sit directly opposite each other on the color wheel — 180 degrees apart. Because they share no common hue, they produce the highest possible contrast when placed side by side, and neutralise each other into grey or brown when mixed.
What are the three main complementary color pairs?
On the traditional artist’s (RYB) wheel the primary pairs are red and green, blue and orange, and yellow and purple. Each pairs one primary with the secondary made from the other two primaries.
How do you find the complement of a color?
Take the color’s hue angle and add 180 degrees. For example, a color at 30 degrees (orange) has its complement at 210 degrees (blue). The chart below does this calculation for a range of popular colors.
How do you use complementary colors without them clashing?
Use one as the dominant color and the other only as an accent — roughly an 80/20 split. You can also mute one of the two by adding grey or white, which keeps the contrast while lowering the tension.
What happens when you mix complementary colors?
Mixing complementary paints neutralises them: they cancel each other into a grey or brown. This is why red and green make brown, and why artists use complements rather than black to darken a color naturally.