Complementary Colour Palette Generator
Pick a base colour and get its opposite on the wheel, plus supporting tones. The highest-contrast pairing colour theory offers.
Free preview · No signup · ~10 seconds
What complementary actually means
Opposite hues, maximum contrast
A complementary pair sits 180 degrees apart on the colour wheel. That is the largest hue difference available, which is why the combination feels energetic and why it is the standard choice when something has to stand out rather than blend in.
Use one as the accent, not fifty-fifty
Equal amounts of two opposite colours fight each other and the eye finds nowhere to rest. The convention is roughly ten to twenty percent accent against a dominant base. That is why a call-to-action button works in the complement and a whole page in it does not.
Where the palette comes from
The base is converted to HSL, the hue is rotated by 180 degrees, and supporting tones are derived by adjusting lightness and saturation around both. Working in HSL rather than RGB is what keeps the results perceptually sensible instead of arithmetically correct but ugly.
Vibrating edges
Two fully saturated complements placed directly against each other appear to shimmer, because the eye cannot focus both at once. Red on green is the classic offender. Desaturating one side or separating them with a neutral fixes it.
Contrast in hue is not contrast in brightness
Complementary colours can have almost identical luminance, which means text in one on a background of the other can fail accessibility checks despite looking bold. Always check the contrast ratio rather than trusting the hue difference.
How to complementary colour palette generator
Pick your base colour
Set the colour picker to your brand or starting colour. There is nothing to upload.
Read the palette
The complement and its supporting tones appear immediately, with the hex code under each swatch.
Copy what you need
Click any swatch to copy its hex, or copy all of them at once.
Complementary Colour Palette Generator — in the editor
The real editor, start to finish — no signup needed to try it yourself.
Free preview · No signup · ~10 seconds
Where complementary pairs work
Call-to-action buttons
Make a button unmissable by putting it in the complement of the page colour.
Landing page accents
Pick a highlight colour that pulls the eye without clashing with the brand.
Charts and data
Separate two opposing series so they are distinguishable at a glance.
Brand exploration
Test how a brand colour behaves against its natural opposite.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Make a Duotone Image in Figma (Building One From Blend Modes)
Figma has no duotone effect. You assemble one from a desaturated image and two blended rectangles — here is the layer stack, the order that matters, and an honest account of what it costs to maintain.
How to Make a Logo White in Photoshop (3 Methods, One of Them Non-Destructive)
Color Overlay, Lock Transparent Pixels, and why Hue/Saturation is the wrong tool even though Lightness looks like it works — plus the fringe that makes a white logo look dirty on a dark background, and how to remove it.
How to Replace a Color in Canva (What's Possible on Elements, and What Isn't on Uploads)
Canva can swap colors on vector elements one swatch at a time. On an uploaded photo or PNG there is no per-color control at all — here is the full picture, including the Duotone approximation and its limits.
Generate a complementary palette
Pick a base colour and copy the hex codes.