Complementary Color Palette Generator
Pick a colour and get the one directly across the wheel, as a palette you can copy as hex, CSS or Tailwind.
Nothing saved yet. Saved palettes stay in this browser, on this device.
Complementary palettes from three colours
Indigo #6366f1
#6366f1 · #f2ef64
Rose #e11d48
#e11d48 · #1de2b7
Emerald #059669
#059669 · #940532
Other colour harmonies
What a complementary pair is
Two colours are complementary when they sit directly opposite each other on the colour wheel, 180° of hue apart. Blue faces orange, red faces cyan-green, violet faces yellow. This generator takes your base colour’s hue, adds 180°, and keeps the saturation and lightness, so the pair is matched in strength and differs only in hue.
Opposite hues are the strongest contrast of hue there is. Placed side by side, each makes the other look more intense, an effect painters call simultaneous contrast. That is the reason to use a complementary pair, and also the risk.
When to use it
A complementary accent is how a single button, badge or price stands out against a page built from its opposite: an orange call to action on a blue site is the textbook case. Sports kits and posters use the full-strength pair for impact.
Used half and half at full saturation, the pair vibrates and tires the eye. Let one colour dominate, and mute or lighten the other with the saturation and lightness sliders. Asking for more than two swatches adds hues 15° and 30° either side of each end, which gives you softer partners for each side of the pair.
Everything here runs in your browser. The colour palette generator has all six harmonies on one page, and the mode buttons above switch this one too, so you can compare a complementary palette with the others from the same base colour.
How do I find the complementary colour of a hex code?
Type the hex into the base colour box. The second swatch is its complement: the same saturation and lightness with the hue turned 180°. Click a swatch to copy its hex.
Is the complement of red green or cyan?
On the RGB and HSL wheel this tool uses, red’s opposite is cyan. The painter’s red–green pair comes from the older red-yellow-blue wheel, where the hues are spaced differently.
Why does my complementary palette look harsh?
Two opposite hues at the same full strength compete for attention. Lower the saturation, or use one colour for most of the design and the other as a small accent.