"Use the complementary color" is one of the most common pieces of color advice. Most people remember it as "the opposite color", but which color counts as the opposite depends on the color model you use.
This guide covers what complementary colors are, how they work for screen colors (RGB), two ways to calculate a complement from a HEX code, and how to use complements well in a design.
1. Complements sit opposite each other on the color wheel
A color wheel arranges hues in a circle, in rainbow order. Two hues directly across from each other (180° apart) are complementary colors.
Because they are as far apart in hue as two colors can be, complements make each other stand out and create strong contrast when placed side by side.
2. There is more than one color wheel
- The RGB wheel (light and screens): built on red, green and blue. Red's complement is cyan, green's is magenta, and blue's is yellow.
- The traditional painter's wheel (RYB): built on red, yellow and blue, as taught in many art classes. Red is usually paired with green, yellow with purple, and blue with orange.
- Perceptual systems such as Munsell: organized around how colors look, with their own, slightly different opposite pairs.
None of these is "the correct one"; pick the model that matches what you are working on. For the web, apps and anything on a screen, RGB is the natural choice, and it's what the rest of this guide uses.
3. RGB complements add up to white
Screens make color by adding red, green and blue light (additive mixing). In RGB, a color's complement is the color that adds up to white (255, 255, 255) when combined with it.
| Color | Original | Complement | Swatch |
|---|---|---|---|
#FF0000 red | #00FFFF cyan | ||
#00FF00 green | #FF00FF magenta | ||
#0000FF blue | #FFFF00 yellow |
Red (255, 0, 0) plus cyan (0, 255, 255) gives exactly (255, 255, 255), white. The other pairs work the same way.
4. Two ways to calculate a complement from a HEX code
If HEX codes are new to you, start with How to Read HEX Color Codes. As an example, let's find the complement of the golden orange #E8A33D (R=232, G=163, B=61).
Method A: subtract from 255 (invert)
Subtract each of R, G and B from 255. In HEX, that's the same as subtracting each pair from FF.
- R: 255 − 232 = 23 →
17 - G: 255 − 163 = 92 →
5C - B: 255 − 61 = 194 →
C2
Result: #175CC2 , the textbook complement that adds up to white with the original.
The catch: this method also inverts lightness. A light color gets a dark complement and vice versa, so the pair won't look like "the same tone, opposite hue".
Method B: subtract from max + min (keep lightness)
To flip only the hue and keep the lightness, add the largest and smallest of the three values, then subtract each value from that sum.
- Largest 232 (R) + smallest 61 (B) = 293
- R: 293 − 232 = 61 →
3D - G: 293 − 163 = 130 →
82 - B: 293 − 61 = 232 →
E8
Result: #3D82E8 . This gives the same color as rotating the hue by 180° in HSL while keeping saturation and lightness unchanged, which is what a "rotate hue 180°" control in a design tool does.
| Original | Method A (invert) | Method B (keep lightness) |
|---|---|---|
#E8A33D | #175CC2 | #3D82E8 |
#A08CC8 | #5F7337 | #B4C88C |
#336699 | #CC9966 | #996633 |
The lavender #A08CC8 becomes a muted olive with Method A and a soft yellow-green with Method B. As a rule of thumb: use Method B for color schemes, and Method A when you need the exact mathematical opposite.
5. Tips for using complements in a design
Complements are high-contrast, so they can look striking or restless depending on how you use them.
Make the areas unequal
Two complements in equal amounts compete for attention. Use one as the base and the other as a small accent (a button, an icon, part of a heading) for a calmer result.
Vary saturation or lightness
Two vivid complements placed edge to edge can appear to flicker along the border. Lowering the saturation of one, separating their lightness, or adding white or gray between them makes the pair easier on the eyes.
Be careful with text and background
Opposite hues do not guarantee readable text. If the two colors are similar in lightness, text will be hard to read. For text, prioritize a clear difference in lightness over a difference in hue.
Don't rely on color alone
People see color differently, and some find combinations such as red and green hard to tell apart. For important information, add a difference in lightness, shape, text or icons as well as color.
Try the neighbors of the complement
Instead of the complement itself, you can pair a color with the two hues on either side of its complement (a split-complementary scheme). It keeps plenty of contrast while clashing less than a direct complement.
6. Complements in everyday vision
If you stare at one color for a while and then look at a white wall, you may see a faint patch of a different color. This is called an afterimage, and the color you see tends to be close to the complement of the original. Complementary colors are not just a design rule; they are tied to how our eyes work.
Summary
- Complementary colors sit opposite each other (180° apart) on a color wheel
- RGB, the painter's RYB wheel and Munsell each have slightly different pairs
- In RGB, a complement adds up to white: subtract each value from 255
- To keep lightness, subtract each value from (largest + smallest)
- In a design, vary area, saturation and lightness, and don't rely on color alone
Related: How to Read HEX Color Codes: Picture a Color from #RRGGBB