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 |