Complementary Color Finder
Find the complementary color for any color by rotating 180° on the color wheel. Complementary pairs create maximum contrast and visual impact.
How Complementary Colors Work
Complementary = Hue + 180° on the color wheel
| Original | Hue | Complementary | Hue |
|---|---|---|---|
| Red | 0° | Cyan | 180° |
| Orange | 30° | Azure | 210° |
| Yellow | 60° | Blue | 240° |
| Green | 120° | Magenta | 300° |
Complementary Color Pairs
| Color 1 | HEX | Color 2 | HEX |
|---|---|---|---|
| Red | #FF0000 | Cyan | #00FFFF |
| Orange | #FF8000 | Azure | #0080FF |
| Yellow | #FFFF00 | Blue | #0000FF |
| Green | #00FF00 | Magenta | #FF00FF |
| Teal | #008080 | Maroon | #800000 |
Using Complementary Colors
``css
:root {
--primary: #3B82F6; /* Blue */
--complement: #F6A03B; /* Orange */
}
/* High contrast pairing */
.cta {
background-color: var(--primary);
color: white;
}
.accent {
color: var(--complement);
}
`
Design Applications
| Use Case | Example |
|---|---|
| CTAs | Blue button, orange accent |
| Charts | Distinguish two data series |
| Sports | Team color contrasts |
| Art | Maximum visual tension |
Find perfect complementary pairs for high-contrast designs.Complementary Pairs in Practice
Complementary colours sit opposite each other on the hue wheel — 180° apart. They
produce the strongest possible contrast between two hues, which is exactly why they are
easy to misuse.
Do not use them at equal weight. 90% of one and 10% of the other reads as designed;
50/50 reads as a warning sign.
- Do not place saturated complements adjacent. Red text on green background vibrates —
the eye cannot settle on the edge.
- Red/green pairs fail for colourblind users, who are roughly 8% of men. If the pair
carries meaning, encode the meaning some other way too.Split-complementary — the two hues either side of the complement — gives most of the
contrast with far less tension, and is the safer default.
Worked Out on a Real Colour
Starting from #2563EB — a typical brand blue:
| Role | HEX | HSL | Contrast on white |
|---|---|---|---|
| Base | #2463EB | hsl(221, 83%, 53%) | 5.2:1 |
| Colour 2 | #EBAC24 | hsl(41, 83%, 53%) | 2.0:1 |
The contrast column is the one to check before assigning roles. Anything below 4.5:1 cannot
carry body text on white, whatever its position in the scheme.As CSS
`css
:root {
--scheme-1: #2463eb;
--scheme-2: #ebac24;
}
`
Or derive them at runtime, so changing the base colour updates the whole scheme:
`css
:root {
--brand: #2563eb;
--brand-rotated: hsl(from var(--brand) calc(h + 120) s l);
}
`
Relative colour syntax is supported in all current browsers and removes the need to keep
derived values in sync by hand.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.