Complementary Color Finder
The complementary color sits directly opposite yours on the color wheel. Enter any color to get its exact complement plus the split-complementary, analogous, triadic, and tetradic sets — each with hex codes and the contrast ratio against your original.
Complementary Colors for Common Colors
Calculated on the RGB color wheel used by screens and CSS, rotating hue by 180° while holding saturation and lightness. On the traditional RYB paint wheel some of these differ — red's complement is green in paint but cyan on a screen.
How to Use the Complementary Color Finder
Enter a hex code, rgb() value, or CSS color name. The tool calculates the exact opposite hue plus the analogous, triadic, split-complementary, and tetradic sets from the same base, and shows the contrast ratio between each result and the color you entered. Copy any single value or export the whole harmony as CSS custom properties.
How the Complement Is Calculated
Your color is converted from RGB to HSL, the hue is rotated by 180 degrees, and saturation and lightness are held constant before converting back. That keeps the complement at the same intensity and brightness as the original, which is what makes the pair feel balanced. Because the rotation happens in HSL rather than a perceptual space, very light and very dark colors produce complements that are mathematically correct but visually subtle.
When to Use Each Harmony
Complementary pairs create the strongest contrast and work best when one color dominates and the other is reserved for accents — a blue interface with orange calls to action, for example. Analogous sets sit next to each other on the wheel and feel calm and cohesive, which suits backgrounds and illustration. Triadic sets are vivid and balanced, and are a good starting point for chart series that need to stay distinguishable.
Frequently Asked Questions about Complementary Color Finder
The complementary color sits directly opposite a color on the color wheel — 180 degrees away in hue, with saturation and lightness held constant. Red and cyan, blue and orange, and yellow and violet are complementary pairs on the RGB wheel used by screens.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.