Pick any hue on the color wheel, go straight across to the other side, and you land on its complement. Put the two together and you have a complementary color scheme, which gives the strongest hue contrast of the basic schemes with two hues 180 degrees apart.
Painters and interior designers use the pair, and so do UI designers and brand teams. The goal is nearly always the same: make one element stand out against another.
Which hues count as opposites depends on the wheel. Britannica names red and green as the complementary pair on the traditional RYB wheel, while RGB screens pair red with cyan.
Hue distance sets the contrast between the two colors. Whether text and layouts stay readable comes down to lightness and proportion.
What Is a Complementary Color Scheme?
Two hues directly opposite each other on the color wheel, 180 degrees apart, form the pair.
Compared with the other basic schemes, this one has the most hue contrast. Analogous schemes use neighbors and monochromatic schemes stick to a single hue. A complementary scheme takes the two furthest apart.
Only the hue relationship defines the pair. Lightness and intensity can change freely, so a pale blue and a deep orange still count.
People define it in a couple of ways. The geometric version is just position, two hues opposite on the wheel. The mixing version asks whether the two colors combine to a neutral. In the Munsell system, the basis of ASTM D1535 for specifying color, two colors of equal value and chroma on opposite sides of its 40-hue circle mix to a gray of the same value.
History adds a wrinkle. Newton’s 1704 circle in Opticks spaced seven colors unevenly, so opposite points were not 180 degrees apart (Programming Design Systems). Goethe’s equally divided circle, drawn around 1809 to 1810, made the 180-degree rule literal (Art & Object).
The scheme itself is just the pair. The palette built on it adds tints, shades, tones and neutrals.
Which pairs you get depends on the wheel, and that’s where the definitions stop agreeing.
Which Colors Are Complementary on Each Color Model?
It depends on the model. Painters’ RYB gives red-green, blue-orange and yellow-purple, while RGB screens and CMYK print give red-cyan, green-magenta and blue-yellow.
| Model | Primaries | Complementary pairs | Typical use |
|---|---|---|---|
| RYB | Red, yellow, blue | Red-green, blue-orange, yellow-purple | Painting, art classes |
| RGB | Red, green, blue | Red-cyan, green-magenta, blue-yellow | Screens, digital design |
| CMYK | Cyan, magenta, yellow | Cyan-red, magenta-green, yellow-blue |
The RYB wheel
Britannica describes the traditional painters’ wheel as an RYB model with red, yellow and blue primaries, and names red and green as its standard complementary pair.
The twelve-step version adds six intermediates, so every hue’s complement sits six steps away. That gives red-orange with blue-green, yellow-orange with blue-violet, and yellow-green with red-violet.
Most art classes teach this wheel, which is why “red and green” is the answer people give first.
The RGB and CMYK wheels
Screens and printers mix color in opposite ways, so each has its own opposite pairs.
The additive RGB model mixes red, green and blue light. It pairs red with cyan, green with magenta and blue with yellow.
Print runs the other way. CMYK inks work by absorbing light, and each ink absorbs one RGB primary. Cyan absorbs red, magenta absorbs green and yellow absorbs blue, according to RMIT’s colour theory text. That’s why cyan lines up opposite red.
In practice, a red-green pair lifted from an art wheel is not an RGB complement, because red’s opposite on screen is cyan. Check the pair in the model your medium uses.
Why Do Complementary Colors Look So Strong Together?
Each hue pushes the eye toward the other. Chevreul named this simultaneous contrast in 1839, noting that two touching colors shift away from each other in both hue and darkness.
He reached the law while directing dye work at the Gobelins Manufactory in Paris, after complaints that a black dye looked weak beside other colors. Seurat and Signac later built Pointillist paintings from small touches of complementary colors.
Hering’s opponent-process theory (1878) is the textbook account of the complementary afterimage you see after staring at one hue.
A newer finding complicates it. A 2025 study in Communications Psychology found afterimage colors follow cone adaptation, not red-green and blue-yellow opponent pairs. Measured afterimage hues were shifted away from the exact opposite of the inducing hue, so “complementary afterimage” is only a rough description. The study disputes both the mechanism and the idea that the afterimage is the precise complement.
Vibration needs one more condition, equal lightness. Albers gave a chapter of Interaction of Color (Yale University Press, 1963) to vibrating boundaries, which come from hues of equal light intensity.
Rotating hue 180 degrees in HSL doesn’t deliver that equality. Nader Sadoughi’s AIC 2024 paper argues that HSB and HSL cannot set equal lightness across hues, so they can’t reproduce Albers’ vibrating-boundary exercise, while CAM16 can.
Fully saturated pairs vibrate hardest. Pulling back the saturation of either hue calms the edge without touching the hue relationship.
Most classic pairs also set a warm hue against a cool one, so temperature contrast stacks on top of hue contrast.
How to Balance the Two Colors
Give one hue the dominant role and the other the accent. An even split makes the two compete for attention.
A decent starting point is the 60-30-10 guideline, a decorating rule of thumb interior designers have used for decades. Bob Vila’s guide calls it a guideline that is meant to be broken.
A pair has two hues and the guideline has three slots, so the third slot goes to a neutral. Planner 5D confirms neutrals count toward the ratio.
The dominant hue takes about 60% of the space, usually backgrounds and large surfaces in the calmer of the two. Neutrals such as white, gray, black or wood tones take about 30% and carry the space between the hues. The complement gets the last 10%, kept small and at full strength.
Those roles set up a visual hierarchy where the eye lands on the accent first. Swap the roles and the mood shifts, even though the pair stays the same.
The split also protects the layout’s visual balance. A large muted area offsets a small loud one. A loud hue in large amounts can’t be offset by anything.
Complementary vs Split-Complementary and Other Color Schemes
Use the straight complement when one hue can stay small. Switch to split-complementary when both hues need large areas, and reserve double complementary for layouts where one hue dominates and the rest stay minor.
| Scheme | Colors | Wheel geometry | Character |
|---|---|---|---|
| Complementary | 2 | Base plus the hue 180 degrees away | Highest contrast, most tension |
| Split-complementary | 3 | Base plus the two hues flanking its complement, commonly 30 degrees either side | Same contrast, less tension |
| Double complementary | 4 | Two complementary pairs forming a rectangle | Rich, hard to balance |
| Triadic | 3 | Three hues 120 degrees apart | Strong, less risky than a straight pair |
| Analogous | 3 or more | Neighbors on the wheel | Calm, low hue contrast |
Corel Painter’s help documentation describes the split-complementary rule as a triangle that usually gives soft contrast. It calls the tetradic rule bold and in need of careful planning.
Google’s logo is the standard tetradic example, with two warm hues and two cool ones kept in check by small use against white, according to Figma’s design library.
Split-complementary costs a little pop and buys forgiveness. If the straight pair feels loud, step down to it before touching saturation.
How to Build a Complementary Color Scheme
Pick a base hue, add 180 degrees to its HSL hue value, then set saturation and lightness by role and test every text pair.
- Pick the base hue, usually the brand or subject color.
- Add 180 to the hue and wrap past 360. A base of hsl(220, 70%, 45%) gives an amber orange at hue 40.
- Assign the dominant and accent roles from the split described above.
- Set saturation and lightness per role, muted for large areas and full strength for the accent.
- Run every text and background pair through the WebAIM Contrast Checker.
- View the result through a color blindness simulator before sign-off.
HSL is an RGB-based wheel. CSS puts red at 0, green at 120 and blue at 240, so red’s partner at 180 lands on cyan, not green.
Adobe Color does the opposite-hue math for you. Choose a base color, select the complementary rule, and the tool picks the partner. Later updates added split complementary, double split complementary and square harmonies.
Coolors generates palettes with the spacebar and lets you lock a color, which anchors the search around an existing brand hue.
Paletton works from an RYB wheel with a complementary mode and five shades per hue, according to toolradar. Its red-green answer will differ from an HSL calculation, so note which wheel each tool uses.
Most design software wants hex or RGB values, so convert the HSL result with an HSL to RGB converter.
For lighter and darker steps of each hue, a tint and shade generator saves guesswork.
One limit on the simulators. The Color Oracle readme warns that highly saturated colors may not simulate well in its current version. A full-strength complementary pair is exactly that case, so confirm the pair with a second check.
Where a Complementary Color Scheme Works Best
It works where one element has to pull the eye away from everything around it, like a call to action, a logo, a feature wall or the focal object in a painting.
UI and web design
Figma’s guidance is to keep the bold pair for the most important parts of a layout, such as buttons and key information. In web design, that makes the complement the action color on a quiet background.
Duolingo is a handy example. Its interface is green, with red accents marking correct and incorrect answers (Figma). Restraint is the lesson here, since the accent hue shows up on very few elements.
Branding
A complementary pair can make a brand recognizable from two colors alone. The LA Lakers’ purple and yellow is one of the examples Figma’s library uses.
The same pair shifts between screen and print, so a brand style guide should list values for each medium and name which hue carries the dominant role.
Interior design
Use the pair in moderation. Benjamin Moore suggests matching the second hue to small accents such as artwork, upholstery and accessories.
Full-strength walls in both hues are better saved for rooms meant to feel energetic. That follows from the energy a standard complementary scheme brings to a living room, per AND Academy’s interior guide.
Painting and film
Fine Art Tutorials points to Van Gogh’s Paul Gauguin’s Armchair and Gauguin’s Still Life with Mangoes and Hibiscus as red-green complementary schemes.
StudioBinder’s breakdown pulls complementary schemes from Vertigo and Eyes Wide Shut, which shows the pair carrying mood as well as emphasis.
Where a Complementary Color Scheme Fails
It fails when hue is the only difference between two elements. Text, status cues and large saturated fields are where the pair breaks.
Contrast ratios and WCAG thresholds
The figures below come from WCAG 2.2 (W3C).
- 4.5:1 is the minimum for normal text (SC 1.4.3, Level AA)
- 3:1 applies to large text, meaning 18 point or 14 point bold
- 3:1 also covers user interface components and meaningful graphics (SC 1.4.11)
- 7:1 is the bar for normal text at Level AAA (SC 1.4.6)
The ratio compares luminance, so two hues 180 degrees apart can still land under 3:1. W3C’s Understanding document says 4.5:1 was chosen to cover moderately low acuity, color deficiencies and age-related contrast loss.
Red-green color vision deficiency
Color Oracle’s documentation puts the two red-green forms at about 7.5 percent of males, with 5 percent for deuteranopia or deuteranomaly and 2.5 percent for protanopia or protanomaly.
MDN advises against pure red and green for good and bad values. A reddish-orange and a bluish-green stay distinguishable for color-blind users while keeping the cultural meaning.
WCAG 1.4.1 bars using color as the only cue. W3C’s guidance counts a significant lightness difference as an additional distinction when the pair reaches 3:1, so a dark red beside a light green passes where two mid-tones do not.
Eye strain and chromostereopsis
Chromostereopsis is a separate effect from the vibration described earlier. The eye’s optics place saturated hues at different apparent depths.
In the standard demonstration on a black background, most viewers see saturated red in front of blue, according to Akiyoshi Kitaoka’s review at Ritsumeikan University. Thompson, May and Stone (Displays, 1993) note Bruecke’s objection that some viewers report blue in front, so the direction isn’t universal.
Kitaoka also reports that on a white background the perceived depth order reverses and the effect is weaker.
A 2026 study in the British and Irish Orthoptic Journal had 30 young adults read colored text on black. Pure blue produced the greatest accommodative lag at 0.61 D, against 0.18 D for red.
Don’t set body text in one hue on its partner. Same goes for status cues carried by hue alone and for saturated blue text on a dark background.
Complementary Color Scheme FAQ
Is a complementary color scheme always a warm and cool pair?
No. Blue and orange split warm and cool cleanly, but pairs built on green or purple, such as yellow-green and red-violet, sit near the temperature boundary.
Judge the pair by hue distance, not by temperature alone.
Can you use tints, shades and tones of the two colors?
Yes. Adding white makes tints, black makes shades, and gray makes tones, and the pair stays complementary as long as the base hues remain 180 degrees apart.
Muted variants soften the contrast, which helps on large surfaces.
Is it complementary or complimentary colors?
The color term is complementary, meaning two hues complete each other. Complimentary means expressing praise or something offered free.
Spell-checkers rarely catch the swap, so check it in headings and file names.
What is the complement of black, white or gray?
None. Black, white and gray have no hue, so they have no position on the color wheel to oppose.
Inverting RGB values flips black to white, but that changes lightness only. In a complementary scheme, these neutrals work as backgrounds, text and separators beside any pair.
Keeping a Complementary Color Scheme Consistent as a Brand Grows
A complementary color scheme stays consistent when both hues live as named color tokens, each with a role, screen and print values, and a list of approved text pairings. Every new screen, template or print run then draws from one record.
Build that record in order. Fix the dominant and accent hues first, test and list the approved text pairings next, and give every status state a non-color cue.
Testing comes second because contrast ratios depend on final values. Any later hue edit voids the results.
The trade-off is flexibility. Locked tokens slow seasonal refreshes, since each changed value restarts the contrast and simulator checks.
Write the tokens and pairings into your brand guidelines. The contrast thresholds in that record follow WCAG 2.2, verified in November 2026, and a published successor standard would change the ratios the approved list must meet.
Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients.
His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8.
He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.
- Sketch Ten Logo Directions Before Lunch: Using Gemini as a Concept Partner - 15 November 2026
- The BMW Logo History, Colors, Font, and Meaning - 14 November 2026
- How to Design an AI Brand That Doesn’t Look Like Every Other AI Brand - 14 November 2026
Bogdan Sandu is a seasoned designer who has been designing websites since 2008. Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients. His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8. He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.
You Might Also Like
