Complementary colors

Complementary colors sit opposite each other on the color wheel — blue and orange, red and green, yellow and purple. They create strong contrast and energy.

Generate complementary palettes

Complementary harmony

Lock colors you like, then regenerate the rest.

Base

Pick

#7c3aed

hsl(262, 83%, 58%)

Pick

#abed3a

hsl(82, 83%, 58%)

Pick

#ad8ae9

hsl(262, 68%, 73%)

Pick

#91d321

hsl(82, 73%, 48%)

Pick

#c969d7

hsl(292, 58%, 63%)

CSS variables

:root {
  --color-1: #7c3aed;
  --color-2: #abed3a;
  --color-3: #ad8ae9;
  --color-4: #91d321;
  --color-5: #c969d7;
}

Tailwind snippet

// tailwind.config — theme.extend.colors
brand: {
        100: "#7c3aed",
        200: "#abed3a",
        300: "#ad8ae9",
        400: "#91d321",
        500: "#c969d7",
}

How complementary schemes work

Take a base hue and add 180° on the wheel. That partner is its complement. In practice, pure complements can feel loud, so designers mute one side (lower saturation) or add neutrals so the accent pops without fighting body text.

When to use them

Call-to-action buttons against a calm brand base
Sports and entertainment brands that want high energy
Data viz series that need clearly separable categories

Accessibility caveat

High chroma complements are not automatically readable. Always check text and icons with a WCAG contrast checker.

Generate yours

Open the palette generator, choose Complementary, lock colors you like, and regenerate the rest.