Complementary Color Palette: How to Build One (+ 6 Examples)
What a complementary color palette is, how to find complementary colors on the wheel, and six ready-made examples with hex codes and CSS.
A complementary color palette pairs two colors from directly opposite sides of the color wheel — like blue and orange, or red and green. The contrast between complements is the strongest possible in color theory, which makes this the go-to structure whenever a design needs energy, focus, or a clear call to action.
This guide shows you how to find complementary colors from any starting hue, plus six ready-made palettes with hex codes. It's part of a color-harmony series alongside monochromatic, analogous and triadic palettes — or pick a base color on PaletteCSS and explore its complements directly.
How to find a complementary color
On a 360-degree color wheel, a color's complement sits exactly 180 degrees away. In practice:
- Pick your base color — for example, blue at hue 220°.
- Add 180° — 220° + 180° = 40°, which lands on orange.
- Adjust lightness/saturation so both colors feel balanced rather than fighting for attention.
Because complements are so high-contrast, the palette almost always needs a dominant and a supporting role — one color covers most of the design, the other appears only as an accent.
6 complementary color palettes (with hex codes)
1. Blue & Orange
The most famous complementary pair — cool base, warm accent.
#0F4C81 · #3E7CA8 · #EAF0F6 · #F4A261 · #E76F51
2. Red & Green
Bold and festive, needs careful balancing.
#7A1F3D · #E63946 · #F1FAEE · #52B788 · #1B4332
3. Purple & Yellow
Rich and cheerful together.
#4C1D95 · #7C3AED · #F5F3FF · #FACC15 · #B45309
4. Teal & Coral
A softer, modern complementary pairing.
#0B6E6E · #2A9D8F · #E8F6F5 · #FF8A6B · #E85D3F
5. Navy & Amber
Professional with a warm pop.
#0F1F3D · #2A4472 · #F4F1E8 · #F2A93B · #C97B1F
6. Pink & Sage
Unexpected and gentle.
#DB2777 · #F9A8D4 · #FDF2F8 · #9CAF88 · #5A6650
How to use a complementary palette in CSS
:root {
--dominant: #EAF0F6; /* mostly used */
--base: #0F4C81; /* text, headers */
--accent: #F4A261; /* buttons, highlights only */
}
body { background: var(--dominant); color: var(--base); }
.button { background: var(--accent); color: #1a1a1a; }Tips for complementary palettes
- Never use both at full saturation and equal size. Let one color dominate (60%+) and treat the other as a true accent (10% or less).
- Add a neutral. White, cream or grey gives both colors room to breathe instead of vibrating against each other.
- Mute one side. A muted version of one complement (like a dusty orange instead of pure orange) is often easier to live with than two fully saturated hues.
- Use complements for calls to action. An accent-colored button on a dominant-colored page is the single most reliable use of this harmony.
Frequently asked questions
What is a complementary color palette?
A palette built from two colors on opposite sides of the color wheel, such as blue and orange — the highest-contrast pairing in color theory.
How do I find a complementary color?
Add 180 degrees to your base color's hue on the color wheel. A tool like PaletteCSS can calculate this instantly from any hex code.
Why do complementary colors look good together?
Because they sit at maximum distance on the color wheel, complementary colors create the strongest possible visual contrast, which the eye reads as vibrant and balanced rather than clashing — as long as one color dominates.
Keep exploring: try the analogous color palette guide, learn the basics in color theory basics, or find complements for any color on PaletteCSS.
