Complementary Color Generator
FreeFind the complementary color of any color instantly. Enter any HEX or RGB value and get the opposite color on the wheel. Free, no signup.
What's next
Settings guide
Common complementary pairs:
| Color | Complement | Notes |
|---|---|---|
| Red (0°) | Cyan (180°) | High web contrast |
| Orange (30°) | Azure blue (210°) | Classic warm/cool |
| Yellow (60°) | Violet (240°) | High energy |
| Green (120°) | Magenta (300°) | Strong pop |
| Blue (240°) | Orange (60°) | Most popular pairing in design |
Adjusting the complementary color:
- ·Keep Hue exactly 180° opposite, vary Lightness for subtlety
- ·Primary: full saturation (e.g., S:90%, L:50%)
- ·Accent/CTA: use the complement at slightly higher saturation or different lightness than the primary
- ·Background tint: use the complement at very low saturation (S:10–15%, L:95%) for subtle warmth
Using complements without clash:
- ·Don't use both colors at full saturation and equal area — one should dominate (60–30 rule)
- ·Mute one color to reduce visual tension: lower its saturation to 30–50%
Format comparison
Complementary vs split-complementary: Instead of using one complement, split-complementary uses the two colors adjacent to the complement (150° and 210° from the original). This reduces the high-tension clash of pure complementary while keeping vibrancy. Better for complex designs where you need three colors.
Complementary vs triadic: Triadic uses three colors at 120° intervals. It's more balanced and versatile than complementary but less dramatic. Complementary schemes are best for two-color strong-contrast designs; triadic for balanced multi-color designs.
Complementary vs analogous: Analogous colors (adjacent on the wheel) are harmonious and low-tension — the opposite end of the spectrum from complementary. Analogous works for calm, cohesive interfaces. Complementary works for urgency, energy, and visual hierarchy.
How it works
Enter a color
Input any HEX, RGB, or HSL value as your base color.
Find complement
The tool adds 180° to the hue in HSL space, keeping saturation and lightness identical.
Export
Copy both colors — the base and its complement — in any format needed.
About this format
Complementary colors sit directly opposite each other on the color wheel — 180° apart in hue. Red and cyan are complementary. Blue and orange are complementary. Yellow and violet are complementary. When placed next to each other, complementary colors create the maximum possible chromatic contrast, which is why they appear vibrant and visually striking together.
In web design, complementary pairings are most effective for CTA elements, accent colors, and any place where you need one element to visually pop against another. An orange button on a blue background is hard to miss. A green success state against a background with red undertones reads clearly as positive against negative. The high contrast makes complementary schemes energetic — sometimes too energetic for large areas of text or calm interfaces.
Finding the complement in HSL is trivial: add 180° to the hue (wrapping around 360°). Blue at hue 240° has a complement at 60° — yellow. The saturation and lightness stay the same, giving you a color with the same vibrancy and weight at the opposite hue.