Color harmony
Complementary Color Finder – Opposite & Inverted Colors
Find the complementary (opposite) color of any HEX or RGB color, plus a perceptual OKLCH complement, the inverted color and split complementary and triadic schemes.
Complementary color
Rotates the HSL hue by 180°, the classic color-wheel opposite.
rgb(246, 175, 60)Perceptual complement (OKLCH)
Keeps OKLCH lightness and chroma, so both colors feel equally bright.
rgb(176, 124, 0)Inverted color
Subtracts each RGB channel from 255, like a photo negative.
rgb(196, 125, 9)Split complementary
Triadic
Analogous
How to use this tool
Complementary colors sit opposite each other on the color wheel and create the strongest contrast of hue. Enter a color to get its classic HSL complement, a perceptual complement that keeps the same lightness, the inverted RGB color and other harmonies built from it.
- 1 Enter a base color.
- 2 Compare the classic, perceptual and inverted opposites.
- 3 Copy a color or open the set in the color wheel.
Frequently asked questions
What is a complementary color?
The color directly opposite on the color wheel, 180° away in hue. A blue such as #3B82F6, for example, pairs with an orange.
What is the difference between complementary and inverted colors?
The complement rotates only the hue and keeps saturation and lightness. Inverting subtracts each RGB channel from 255, which also flips lightness, so a dark blue becomes a light yellow.
Why offer a perceptual complement?
HSL hues are not evenly spaced for the eye. The OKLCH complement keeps the same perceived lightness and chroma, which often gives a more balanced pair.
How should I use complementary colors in a UI?
Use one as the main color and the other sparingly for accents and calls to action. Check text contrast, because opposite hues can still have similar lightness.