What is a complementary colour?

The hue directly opposite on the wheel, 180 degrees away. It gives the strongest contrast of any pair, which is also why using both at full saturation tends to look loud.

Why does my grey produce a palette of greys?

Because harmonies rotate hue, and a grey has no saturation to carry one. Every rotation lands on the same colour, which is the arithmetic behaving correctly.

What contrast ratio do I need for text?

4.5:1 against the background for body text under WCAG AA, or 3:1 for large text. The ratios beside each swatch are against white and black.

Colour Palette Generator

Build a colour palette from one base colour using harmonies, with contrast ratios and CSS variables.

Runs in your browserNo account neededFree

Processing: This tool runs entirely in your browser. Your input and any file you open stay on your device — nothing is uploaded to a server.

How to use the colour palette generator

Pick a base colour, by swatch or by typing a hex value.
Choose a harmony and read the contrast ratios beside each swatch.
Copy the hex list, or the CSS custom properties, into your stylesheet.

About this tool

A colour harmony is a rotation around the hue wheel. Complementary is one rotation of 180 degrees, triadic is two of 120, analogous stays within 30 either side — the arithmetic is trivial, and the value of a generator is in showing the results side by side rather than in the calculation.

What the wheel does not tell you is whether a palette works, and the usual reason it does not is contrast. A colour that looks striking as a block is unreadable as text, so each swatch is shown with its ratio against white and against black. The 4.5:1 line is the WCAG AA threshold for body text; below it, that colour is for surfaces and borders, not for words.

The hue wheel is also not perceptually even. Equal steps in HSL hue do not look like equal steps to the eye — the yellows in particular pass quickly while the blues linger — so a mathematically perfect triad can still look lopsided. These are a starting point to adjust rather than a result to accept.

One behaviour worth expecting: rotating the hue of a grey produces grey. Saturation is zero, so there is no hue to rotate, and every harmony collapses to the same colour. That is the model working correctly rather than a fault.

Common uses

Building a brand palette outward from a single colour.
Finding an accent that contrasts with an existing primary colour.
Producing a tint and shade ramp for a UI colour scale.

Frequently asked questions

What is a complementary colour?: The hue directly opposite on the wheel, 180 degrees away. It gives the strongest contrast of any pair, which is also why using both at full saturation tends to look loud.
Why does my grey produce a palette of greys?: Because harmonies rotate hue, and a grey has no saturation to carry one. Every rotation lands on the same colour, which is the arithmetic behaving correctly.
What contrast ratio do I need for text?: 4.5:1 against the background for body text under WCAG AA, or 3:1 for large text. The ratios beside each swatch are against white and black.

Related tools

Colour Palette From Image

Pull the dominant colours out of a picture as HEX, RGB and HSL, with CSS variables.

Image Colour Picker

Pick colours from an image by clicking, with an adjustable sample area and hex, RGB and HSL values.

Colour Contrast Checker

Check text and background colours against the WCAG 2.1 contrast requirements for AA and AAA.

Color Name Finder

Find the closest CSS colour name to any colour, and see whether it is an exact match.