Complementary color finder
Helps designers pick a color that stands out against the main color in logos, buttons and ads.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter hex color.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Rotating the HSL hue by 180 degrees is the same as: new channel = (max channel + min channel) − channel.
Example
Inputs: HEX color = #336699. Result: Complementary color: #996633; Original hue: 210 °; Complement hue: 30 °.
#336699
#996633
Limits and caveats
- Uses the RGB/HSL wheel of screens, not the traditional painter's wheel (red opposite green).
- Gray, white and black have no complement, so they stay the same.
Questions about this tool
What is the complement of red?
On the screen wheel it is cyan #00FFFF. On the traditional painter's wheel, green is the complement of red.
How is complementary different from inverted?
The complement keeps lightness and saturation, while inversion turns light into dark. For fully saturated colors they can match.
How do I use complementary colors in design?
Use one as the main color and the other for elements you want to pop, such as buy buttons, and avoid equal areas of both.