How do I make a colour palette from one colour?

Pick your base colour and choose a scheme. The tool works out matching colours by moving around the colour wheel and shows their HEX codes.

What is a complementary colour?

The colour directly opposite on the colour wheel, 180 degrees away. Blue and orange are complementary, as are red and cyan. Placed side by side they give the strongest contrast.

How many colours should a palette have?

Three to five is typical for a brand or website: one main colour, one or two supporting colours, and a neutral for text and backgrounds.

Color Palette Generator

Generate a colour palette from one base colour using colour theory, such as analogous, complementary and triadic. Free, with HEX codes.

How to use it

Click the colour box and pick a base colour.
Choose a colour scheme.
Click a swatch to copy its code, or copy the whole list underneath.

The schemes

Each scheme picks colours by their position on the colour wheel, which runs through 360 degrees of hue.

Scheme	Colours used	Effect
Analogous	Neighbours, 30° and 60° either side	Calm and harmonious
Complementary	The base, its opposite 180° away, a lighter version of each, and a dark neutral	Strong contrast
Triadic	Three colours 120° apart	Lively and balanced
Tetradic	Four colours 90° apart	Rich, needs care
Split complementary	The base and the two colours beside its opposite	Contrast, but softer
Monochromatic	One hue at six levels of lightness	Clean and simple

How it works

The base colour is converted to HSL: hue, saturation and lightness. The tool then turns the hue by the angles the scheme calls for, keeping saturation and lightness the same, and converts each result back to a HEX code. The monochromatic scheme keeps the hue and changes only the lightness.

Using a palette

A common guide in interior and web design is the 60-30-10 rule: use the main colour for about 60% of the space, a second colour for 30%, and an accent for 10%. Buttons and links usually take the accent colour.

Check the contrast of text

Colours that look good together may not be readable as text on each other. The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5 to 1 between normal-size text and its background. Test your text and background pair with a contrast checker before using them.

Limits

The schemes follow geometric rules. They give a sound starting point, and the results usually need adjusting by eye.
Very dark, very light or grey base colours give palettes whose colours look almost the same, because there is little hue to turn.
The palette is not saved. Copy the codes you want to keep.
Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Do not rely on colour alone to carry meaning.