pngtoolskit.org
PNG and image utilities, in the browser
Workflows Sign in Create accountSign up

Complementary Color Generator

base colour + its opposite · click any swatch to copy the hex

Pick a colour and get its complement — the hue directly opposite on the colour wheel. Complementary pairs create the strongest contrast there is, which is why they pop in call-to-action buttons, sports branding, and anything that needs to grab attention. Everything is computed in your browser; click a swatch to copy its hex.

Ready.

How complementary colours work

Two colours are complementary when they sit 180° apart on the wheel — red and cyan, blue and orange, yellow and violet. Placed side by side they intensify each other; blended, they cancel to gray. Use the pair sparingly: full-strength complements vibrate against each other, so it's common to keep one dominant and use the other only as an accent.

FAQ

How do I find the opposite of a color?

Enter your colour above (via the picker or a hex code) and the complement appears next to it. Click either swatch to copy its hex.

Want a softer contrast?

Try split-complementary (the two colours either side of the complement) or analogous colours for a more harmonious scheme.

Part of: Pull a colour palette out of an image

Dominant colours give you the brand; the harmony tools give you the rest of the set.

  1. 1 Dominant colors The colours actually in the image, by area
  2. 2 Average color The single colour it reads as from far away
  3. 3 Color shades Tints and shades of one of them
  4. 4 Complementary What to pair it with
  5. 5 WCAG contrast Whether text on it passes WCAG

All 28 step-by-step workflows