Analogous Palette Generator

What this generator does

Gives you the quiet relationship rather than the loud one. Where the complementary generator maximises contrast by taking the opposite hue, this minimises it by staying within a 60° arc — the same choice a painter makes between drama and harmony.

How to use this tool

1. Press Generate palette for a random set of three neighbours.
2. Or set the base hue yourself and let the neighbours follow.
3. Adjust saturation and lightness to suit the medium.
4. Copy the values or the CSS custom properties.

Understanding the controls

Base hue

The middle of the three. The others sit 30° either side, so the whole palette spans a 60° arc of the wheel.

Saturation

Held constant across all three, which is what keeps them reading as a family. Lowering it makes the scheme quieter still.

Lightness

Also constant across the three. Because analogous hues are so close, lightness is what you will use to separate them in a layout.

Worked examples

Blues and greens

A base of 200 gives 170, 200 and 230 — cyan through blue.

Autumn

A base of 30 gives 0, 30 and 60 — red, orange and yellow.

Wrapping

A base of 10 gives 340, 10 and 40, because 10 − 30 wraps round rather than going negative.

Common use cases

• A website or brand palette that should feel coherent rather than bold
• Backgrounds and surfaces that must not fight the content
• A landscape or nature illustration where colours should sit together
• A chart where series are related rather than opposed
• Any design that has become too busy and needs its colours calming

How this generator works

Three hues are taken at −30°, 0° and +30° from the base, wrapping round the wheel where needed, with saturation and lightness held identical. Keeping the other two components fixed is deliberate: it isolates the hue relationship, so what you see is the scheme itself rather than a mixture of three different effects.

Randomness and fairness

Only the base hue and the saturation and lightness are drawn at random. The two neighbours are fixed arithmetic on the base, so the relationship is identical every time and only its position on the wheel changes.

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

Limitations and good to know

• Three analogous hues at the same lightness are hard to tell apart, especially for anyone with reduced colour vision. Vary lightness as well as hue if the distinction has to carry meaning.
• An analogous scheme has no natural accent — nothing in it stands out. Designs usually add a complementary colour for anything that needs to be noticed.
• The 30° spacing is the convention, not a rule. A wider spread is still analogous in spirit but starts behaving like a triad.
• As with all the harmony tools here, the relationship is geometric rather than perceptual — HSL does not model how bright a hue looks.

Common mistakes

Relying on hue alone to distinguish the three

Neighbouring hues at the same lightness are nearly indistinguishable in greyscale and for many colour-blind readers. Change lightness too.

Expecting the palette to provide an accent

It cannot — that is what makes it restful. Add the complement of your base hue when you need something to stand out.

Practical tips

• Pick one of the three to dominate and use the other two in smaller amounts; an even three-way split usually reads as indecisive.
• Check the palette in greyscale. If the three become one shade, add lightness variation before going further.

Privacy and your data

Colours are calculated in your browser; nothing is uploaded, stored or written into the page address. Analytics records only that a palette was produced.

Frequently asked questions

What is an analogous colour scheme?

Colours next to each other on the wheel, conventionally 30° apart. They share undertones, so they blend.

Why does my analogous palette look flat?

Because all three share saturation and lightness. Vary the lightness to create hierarchy — hue alone will not do it at this spacing.

How do I add an accent?

Take the complement of the base hue — 180° opposite — and use it sparingly.