What Are Complementary Colors? Color Wheel and 5 Harmony Rules
Complementary colors are two hues that sit directly opposite each other on a color wheel, 180° apart, which gives them the strongest possible hue contrast. Which color counts as opposite depends on the wheel: on the painter's red-yellow-blue (RYB) wheel, red pairs with green, while on the RGB/HSL wheel used by screens and CSS, red (0°) pairs with cyan (180°). To use a pair without a garish result, let one color dominate, keep the other as a small accent and check text contrast separately.
What makes two colors complementary?
A color wheel bends the hues into a circle so you can see how far apart two colors are. Complementary colors are as far apart as two hues can get, and that distance does two things. Placed side by side, the two colors make each other look more vivid, which is why one orange button jumps off a blue page. Mixed together, a complementary pair cancels toward a neutral: a gray when you mix paint, white when you mix light.
That same tension is why careless complementary palettes look loud. Two fully saturated opposites used in equal amounts fight for attention, and when they also have similar lightness, the edge where they meet can seem to vibrate. The cure is to give one color the lead and to vary lightness and saturation, not just hue.
RYB vs RGB: why the color wheel gives two answers
There is more than one color wheel. The traditional RYB wheel taught in art classes is built on red, yellow and blue paint primaries. The RGB wheel behind screens, CSS and HSL/HSB color pickers is built on red, green and blue light; in CSS, red sits at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240° and magenta at 300°. Because the hues are spaced differently around the circle, "opposite" lands on a different color.
| Color | Opposite on the RYB wheel (paint) | Opposite on the RGB/HSL wheel (screens) |
|---|---|---|
| Red | Green | Cyan (180°) |
| Yellow | Violet | Blue (240°) |
| Blue | Orange | Yellow (60°) |
| Green | Red | Magenta (300°) |
| Orange | Blue | Azure (210°) |
Color-order systems add a third answer: on the ten-hue Munsell circle, red sits opposite blue-green. None of these wheels is wrong; they serve different materials and purposes. Use RYB charts when you mix paint and the RGB/HSL wheel when you choose colors for a screen. Tools differ as well: an Adobe staff answer in the Adobe Color community forum says its harmony rules are based on an RYB wheel, while adding 180 to the hue in CSS hsl() uses the RGB wheel. Perceptual color spaces such as LCH and OKLCH place hues at yet other angles (MDN notes that sRGB green sits at 120° in sRGB but at about 134° in CIELAB), so "+180°" gives a slightly different partner in each.
The 5 color harmony rules and their angles
Complementary is only one of the classic harmony rules. The others are also fixed patterns of hue angles. Below, red (0°) on the RGB/HSL wheel is the base color. The exact spread of split-complementary and analogous schemes is a convention, and most palette tools let you widen or narrow it.
| Rule | Hue positions (base 0°) | Character | Works well for |
|---|---|---|---|
| Complementary | 0°, 180° | Strongest hue contrast; tense in equal amounts | One accent that must stand out |
| Split-complementary | 0°, 150°, 210° | Strong contrast with less tension | Beginners who want contrast |
| Analogous | 330°, 0°, 30° | Calm and unified; little contrast | Backgrounds, illustrations, moods |
| Triadic | 0°, 120°, 240° | Lively and balanced | Playful designs, three distinct groups |
| Tetradic (square) | 0°, 90°, 180°, 270° | Richest, hardest to balance | Large layouts, experienced designers |
A tetradic scheme can also be a rectangle: two complementary pairs that are not evenly spaced, such as 0°, 60°, 180° and 240°. MDN's palette-generator example builds complementary, triadic and tetradic sets the same way, by adding 180°, ±120° or 90° steps to a base hue.
How to use complementary colors without a garish result
Good palettes come from giving each color a job. A common starting point is the 60-30-10 rule: roughly 60% of the area in a dominant color, 30% in a secondary color and 10% in an accent. It is a rule of thumb borrowed from interior decorating, not a law, and designers treat the numbers as a starting point.
- Pick a base hue from your content, photo or brand.
- Choose a harmony rule and read the partner hues off the wheel.
- Assign roles. Make a pale or muted version of the base dominant, use a deeper version for headers or panels, and save the complement for the 10% that should draw the eye, such as one button.
- Vary lightness and saturation. A quiet dominant color lets a saturated accent stand out without a fight.
- Check contrast for every text and background pair before you finish.
Figure 3 applies the same card layout to three schemes. Each keeps a light dominant background, a deep secondary header and one small accent, so no two strong colors compete for the same space.
Contrast and accessibility: hue contrast is not readability
Opposite hues can still have almost the same lightness, and lightness is what makes text readable. WCAG 2 measures it with a contrast ratio, (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors; results run from 1:1 to 21:1. Success criterion 1.4.3 (level AA) asks for at least 4.5:1 for normal text and 3:1 for large text, meaning 18 pt or 14 pt bold. Under criterion 1.4.11, user interface components and meaningful parts of graphics need 3:1 against adjacent colors.
Run the numbers on classic pairs and the problem is obvious. Pure red (#FF0000) on green (#009900) scores 1.06:1, so the two turn into nearly the same gray. Orange (#F97316) on blue (#2563EB) scores 1.84:1. Red on cyan (#00FFFF) reaches 3.19:1, enough only for large text. Navy (#1E3A8A) on peach (#FFEDD5) scores 9.04:1. Keep the complementary hue for shapes and accents, and set body text in a very dark or very light version of your colors.
Common mistakes with color wheel palettes
- Equal amounts of two saturated opposites. Let one color lead and shrink the other.
- Assuming opposite means readable. Check every text pair against 4.5:1.
- Mixing up wheels. A palette chart drawn on the RYB wheel will not match the 180° partner in an HSL picker.
- Relying on color alone. WCAG criterion 1.4.1 says color should not be the only visual means of conveying information. Red-green color vision deficiency is the most common type, so add labels, icons or patterns.
- Treating 60-30-10 as a formula. Use it to set a clear hierarchy, then adjust by eye.
FAQ
What is the complementary color of blue?
On the painter's RYB wheel, it is orange. On the RGB/HSL wheel, pure blue at 240° pairs with yellow at 60°.
How do I find the complementary color of a hex code?
Convert the color to HSL and add 180 to the hue while keeping saturation and lightness: hsl(30 100% 50%), an orange, becomes hsl(210 100% 50%), an azure blue. Inverting each RGB channel (255 minus the value) also gives the opposite hue, but it flips lightness too, so a dark navy turns into a light tan.
Are complementary colors the same as contrasting colors?
Not quite. Complementary colors differ most in hue, while readable contrast depends on a difference in lightness. On the RGB wheel, dark blue and pale yellow are both complementary and high-contrast; on the RYB wheel, pure red and a mid green are complementary but nearly identical in lightness.
Sources: MDN: the CSS <hue> data type; MDN: Using relative colors (palette examples); W3C: Understanding WCAG 2.2 Contrast (Minimum); Adobe: A guide to complementary colours
Related reading
Original illustrations created to help explain this article.