What is a complementary colour?

The hue directly opposite on the colour wheel — 180° away. It gives the strongest contrast the wheel offers.

Why does my complement look wrong?

HSL treats all hues as equally light, and human vision does not. Yellow at 50% lightness looks far brighter than blue at 50%, so a complement often needs its lightness nudged by eye.

Is a complementary pair accessible?

Not necessarily. Hue opposition is not the same as luminance contrast — check any text pairing in the contrast pair generator.

Complementary Colour Generator

Gives you a colour and its complement — the hue exactly 180° opposite on the wheel. That pairing is the strongest contrast the colour wheel offers, which is why it draws the eye and why it is easy to overuse.

Saturation (%)

How intense the colours are. Below about 20% every relationship looks the same.

Lightness (%)

How light or dark. Extremes wash the relationship out.

Seed (optional)

A word that brings the same palette back.

Choose the base hue myself rather than drawing one at random

Your palette will appear here.

What this generator does

Produces colours with a defined relationship, which the single-colour tools on this site cannot. The hex, RGB and HSL generators each return one unrelated colour; this returns two whose hues are exactly opposite, so the pair works together by construction rather than by luck.

How to use this tool

Press Generate palette for a random base colour and its complement.
Or tick the box and set the hue, saturation and lightness yourself.
Read the hex, RGB and HSL values from each swatch.
Copy the values, or copy them as CSS custom properties.

Understanding the controls

Base hue: Where on the colour wheel to start, from 0 to 359 — 0 is red, 120 green, 240 blue. The complement is always this plus 180, wrapped round.
Saturation: How intense the colours are. Below about 20% every relationship collapses towards grey and the complement stops looking like a complement.
Lightness: How light or dark both colours are. Extremes wash the relationship out — near 0% everything is black and near 100% everything is white.
Seed: Brings the same palette back, so a colour chosen for a project can be regenerated rather than hunted for again.

Worked examples

Red and cyan: Hue 0 and hue 180 — the classic complementary pair.
Orange and blue: Hue 30 and hue 210, the pairing that dominates film posters.
Wrapping: A base hue of 200 gives a complement of 20, because 380 wraps back round the wheel.

Common use cases

Picking an accent colour that stands out against a brand colour
Choosing a call-to-action colour for a page
Setting up a two-colour poster or flyer
Teaching colour theory with real values rather than a diagram
Finding a contrasting colour for a chart series

How this generator works

The base hue is taken as an angle on the colour wheel and the complement is that angle plus 180°, wrapped back into 0–359. Saturation and lightness are held constant across both, so the only thing that changes is hue — which is what makes them complements rather than merely two colours. The values are then converted from HSL into RGB and hex for use.

Randomness and fairness

The base hue, saturation and lightness are drawn at random unless you set them, and the ranges are deliberately narrowed — saturation 45–85% and lightness 38–62% — because outside those the relationship becomes invisible. The complement is not random at all: it follows from the base by fixed arithmetic.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

HSL is a simple transform of RGB, not a perceptual model. Two colours at the same HSL lightness can look very different in brightness — yellow and blue especially — so a complement may need its lightness adjusting by eye.
Complementary pairs at high saturation can appear to vibrate where they meet, which is uncomfortable for text and fine detail. The split-complementary option on the full palette generator avoids this.
This gives the relationship, not a design. Which of the two dominates and in what proportion is a decision the tool cannot make.
The contrast figures shown are against pure black and white, not against each other. Use the contrast pair generator to check a specific text-on-background combination.

Common mistakes

Using both colours in equal amounts: Complementary pairs fight when balanced. The usual approach is one dominant colour with the complement as an accent.
Putting saturated complementary text on a saturated complementary background: That is the pairing most likely to vibrate and the hardest to read. Check it in the contrast pair generator before committing.

Practical tips

Adjust the complement's lightness rather than its hue if it feels too strong — the relationship survives, and the contrast softens.
Copy the CSS custom properties straight into a stylesheet rather than transcribing hex values by hand.

Privacy and your data

Everything is calculated in your browser and nothing is uploaded or stored. No colour values reach the page address, so a palette exists only in the tab until you copy it. Analytics records that a palette was generated and nothing about its colours.

Frequently asked questions

What is a complementary colour?: The hue directly opposite on the colour wheel — 180° away. It gives the strongest contrast the wheel offers.
Why does my complement look wrong?: HSL treats all hues as equally light, and human vision does not. Yellow at 50% lightness looks far brighter than blue at 50%, so a complement often needs its lightness nudged by eye.
Is a complementary pair accessible?: Not necessarily. Hue opposition is not the same as luminance contrast — check any text pairing in the contrast pair generator.