Complementary colors are pairs of hues that sit directly opposite each other on a color wheel, such as blue and orange or red and cyan. In color theory, they produce the strongest possible hue contrast, and when mixed in the right proportions they cancel each other toward a neutral white, gray or black, depending on the color model.
Designers use complementary pairs to draw attention, separate figure from ground and create vivid, energetic palettes. The same property that makes them powerful also makes them demanding: used at full saturation and in equal amounts, they can vibrate visually and tire the eye.
Why complementary colors depend on the color model
Which hues count as complements depends on the color wheel being used. Each model arranges hues according to a different principle, so the opposite of red, for example, is green in one system and cyan in another.
| Color model | Basis | Example pairs | Mixture of a pair |
|---|---|---|---|
| RYB artist wheel | Traditional pigment primaries | Red and green, blue and orange, yellow and violet | Muddy brown or gray |
| RGB and HSL | Additive light primaries | Red and cyan, green and magenta, blue and yellow | White light |
| CMY subtractive | Printing inks | Cyan and red, magenta and green, yellow and blue | Near black or dark neutral |
| Perceptual opponent model | How vision encodes color | Red versus green, blue versus yellow axes | Neutral gray at equal strength |
On digital screens the practical definition is the HSL or HSV hue rotated by 180 degrees. A hue of 210 degrees, a medium blue, has its complement at 30 degrees, an orange. Perceptually uniform spaces such as CIELAB and OKLCH give more balanced opposites because equal angles there correspond more closely to equal perceived differences.
How complementary contrast affects perception
Complementary colors intensify each other when placed side by side, an effect known as simultaneous contrast. The visual system exaggerates differences at boundaries, so an orange next to a blue appears more orange than it does on a neutral background.
The same mechanism explains afterimages: staring at a saturated red and then looking at a white surface produces a faint cyan image, because the receptors for red have adapted. Opponent-process theory describes vision as organized along red-green and blue-yellow channels, which is why these pairs feel naturally opposed.
When two complements have similar lightness and high saturation, their shared edge can appear to shimmer or vibrate. This effect is useful for posters meant to stop the eye but harmful for body text, where it reduces legibility.
Complementary schemes and related harmonies
The complementary scheme is the simplest contrasting color harmony, and several related schemes soften or extend it. The table below shows how they differ and when each one is appropriate.
| Harmony | Hue relationship | Contrast level | Typical use |
|---|---|---|---|
| Complementary | Two hues 180 degrees apart | Highest | Calls to action, sports branding, posters |
| Split-complementary | Base hue plus two hues about 150 degrees away | High but softer | Lively layouts with less tension |
| Double complementary | Two complementary pairs, a rectangle on the wheel | High and complex | Illustration and rich palettes |
| Analogous | Neighboring hues within about 30 to 60 degrees | Low | Calm, cohesive interfaces |
| Monochromatic | One hue in varying lightness and saturation | Lowest in hue | Minimal and editorial design |
Split-complementary schemes are often the more forgiving choice for products and interfaces, because they keep strong contrast while avoiding the direct tension of a single opposed pair.
Using complementary colors in design
Effective use of complementary colors relies on unequal proportions and controlled saturation. One hue usually dominates as the base, while its complement appears in small amounts as an accent that attracts attention.
| Goal | Recommended approach | Reason |
|---|---|---|
| Make a button stand out | Accent in the complement of the dominant brand hue | Hue contrast pulls the eye to the action |
| Keep a page calm | Desaturate one or both hues, vary lightness | Reduces vibration while keeping contrast |
| Readable text on color | Rely on lightness difference, not hue alone | Legibility depends on luminance contrast |
| Separate data series | Use a blue and orange pair | Remains distinguishable for most color vision deficiencies |
| Neutralize a color cast | Add a small amount of the complement | Opposite hues cancel toward neutral |
A common proportion guideline is the 60-30-10 distribution, in which the complement occupies roughly the 10 percent accent share. Photographers and colorists use the same principle in the teal and orange grade, which separates warm skin tones from cool backgrounds.
Limitations and accessibility pitfalls
Complementary colors guarantee hue contrast, not readable contrast. Several common mistakes follow from confusing the two.
- Low luminance contrast: red on green or blue on orange can share similar lightness and fail the WCAG minimum of 4.5:1 for normal text.
- Red-green dependence: the most common color vision deficiencies make red and green hard to tell apart, so the pair must never carry meaning alone.
- Equal areas at full saturation: large equal fields of opposed hues feel aggressive and cause visual fatigue.
- Model mismatch: a complement chosen on a pigment wheel may not look opposite on screen, and the reverse.
- Printing shifts: saturated RGB complements can fall outside the printable gamut and dull noticeably in CMYK.
In plain words
Complementary colors are opposites on the color wheel, like blue and orange. Put them next to each other and both look brighter and more intense.
That is why a small orange button on a blue page is so easy to spot. The trick is to use one color widely and the other sparingly. Using both equally and at full strength is like two people shouting at once.
A real-world example
A design team builds a booking interface for a travel service whose brand color is a deep blue at a hue of about 215 degrees. Early tests show that the main booking button, set in a lighter blue, is overlooked on busy search result pages.
The designer selects the complementary hue, an orange at about 35 degrees, for the primary action only, and uses it on less than 10 percent of the screen. To protect legibility, the button label is dark navy rather than white, which brings the text contrast above 4.5:1, and the orange is slightly desaturated to avoid vibrating against the blue header.
In the next usability round, participants find the booking action faster and no longer scan the page for it. Because meaning is also carried by the button label and position, the design works for users with color vision deficiencies as well.