Colour Palette Generator

What this generator does

Produces colours rather than a description of colours. The hex, RGB and HSL generators each return one unrelated value; this returns a set whose hues stand in a defined geometric relationship, which is what makes it a palette rather than a handful of swatches that happen to be on screen together.

How to use this tool

1. Choose the relationship you want between the colours.
2. Press Generate palette, or set the base hue, saturation and lightness yourself.
3. Read the values from each swatch.
4. Copy them as plain values or as CSS custom properties.

Understanding the controls

Relationship

Which harmony to build. Complementary maximises contrast with two opposite hues, analogous minimises it with three neighbours, and the others sit between. This is the only control that changes the structure rather than the appearance.

Base hue

Where on the wheel the palette starts, 0 to 359. Every other colour is measured from here, so changing it rotates the whole palette without altering the relationship.

Saturation

How intense the colours are, held constant across the set. Below about 20% every harmony collapses towards grey and stops being distinguishable from any other.

Lightness

How light or dark, also constant across the set — except for monochromatic, which varies lightness deliberately because that is all it has to work with.

Seed

Brings the same palette back, so a scheme chosen for a project can be regenerated rather than hunted for again.

Worked examples

Triadic from hue 0

0°, 120° and 240° — red, green and blue at equal saturation and lightness.

Analogous from hue 200

170°, 200° and 230° — three neighbouring blues that blend rather than compete.

Monochromatic

One hue at four lightnesses, from dark to light.

Common use cases

• Choosing a colour scheme for a design or brand
• Breaking a colour-choice block with a starting point you would not have picked
• Building a chart palette where series need to be distinguishable
• Teaching colour theory with real values rather than a diagram
• Interior, graphic or illustration mood boards that need actual colours

How this generator works

Each harmony is a set of rotations on the hue circle: the complement is +180°, analogous neighbours are ±30°, a triad is +120° and +240°, a tetrad is +90°, +180° and +270°, and split-complementary takes +150° and +210°. Saturation and lightness are held identical across every swatch so that only hue varies, which is what makes the relationship visible. Monochromatic is the exception — one hue stepped through lightness — because a single hue has nothing else to vary. Values are then converted from HSL into RGB and hex.

Randomness and fairness

The base hue is drawn at random unless you set it, and the default saturation and lightness ranges are deliberately narrowed — 45–85% and 38–62% — because outside them every harmony looks alike. The other colours are not random at all: they follow from the base by fixed arithmetic, which is what makes the set a palette. A seed replaces the cryptographic draw with a deterministic, non-cryptographic one so a palette can be reproduced.

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 against blue especially — so a palette often needs adjusting by eye.
• A harmony is a geometric relationship, not a guarantee that the colours work together in a design. Proportion, context and typography all matter and none of them is modelled.
• The contrast figures shown are against pure black and white only. For text on one of these colours, or one on another, use the contrast pair generator.
• Colour-blind readers may not distinguish hues that are evenly spaced on the wheel, so do not rely on hue alone to carry meaning.

Common mistakes

Using every colour in the palette at equal weight

A harmony gives you colours that can work together, not a recipe for how much of each. One should lead.

Assuming a harmonious palette is an accessible one

Hue relationships say nothing about luminance contrast. Check any text pairing with the contrast pair generator.

Practical tips

• Pick one colour to dominate and use the rest in smaller amounts; an even split between three or four colours usually reads as indecisive.
• Check the palette in greyscale. If two swatches become the same shade, they will not be distinguishable to every reader.
• Copy the CSS custom properties straight into a stylesheet rather than transcribing hex values by hand.

Frequently asked questions

What is the difference between the harmony types?

They are different angles on the colour wheel. Complementary is 180° for maximum contrast, analogous is ±30° for minimum, and triadic and tetradic space three or four colours evenly between those extremes.

Why do the colours look different in brightness?

Because HSL treats all hues as equally light and human vision does not. Yellow at 50% lightness looks far brighter than blue at the same value.

Can I get the same palette back?

Yes — enter a seed word before generating, and the same word always produces the same palette.