Colour Palette Generator | Build From One Base Colour

What it does

The Colour Palette Generator produces a five-swatch palette derived from a single base colour using the classical colour-theory harmonies: monochromatic, analogous, complementary, triadic, and tetradic. Each harmony rotates the base around the colour wheel by a different fixed angle and varies the lightness in a predictable way, so the palettes are reproducible rather than aesthetic guesses. You start with the colour you have, you pick the relationship you want, you walk away with a palette built on a defensible structure.

Common situations

You’re starting a new design with one fixed brand primary. The client gave you the hex value six months ago and locked it in; the rest of the palette is your problem. Picking by eye is fast and inconsistent; rotating the colour wheel mathematically gives you a palette you can defend in the design review with words other than “I felt it worked”.

You’re producing three or four candidate palettes for the same brief. Generate one off the base colour, switch the harmony, generate another. Five harmonies, five distinct directions, ten seconds of work instead of an hour of moving sliders by feel.

You inherited a half-finished design system with one core colour documented and no rationale for the rest. Running the documented colour through each harmony reveals which family the existing supporting colours probably came from, which makes the implicit system explicit and easier to extend without drift.

You’re scoping a website redesign for a client whose brand is built around photography rather than graphics. The dominant colour from the photographic style becomes the base; harmonies generate a palette that matches the imagery’s mood without competing with it.

What you need to know

Colour theory operates in HSL space, not RGB. RGB does not have a clean concept of “rotate the hue”, but HSL does, which is why every palette tool eventually converts internally. Each of the five harmonies represents a specific geometric relationship on the HSL wheel:

Monochromatic holds the hue and saturation steady, varying only lightness across five steps. Calm, restrained, hard to misuse. Limited expressive range.
Analogous rotates by ±30° from the base, picking neighbouring hues. Warm and cohesive; it feels like a single light source illuminating related materials.
Complementary pairs the base with its opposite (180° away), then varies lightness on both sides. High contrast, dramatic, easy to overuse.
Triadic uses three hues evenly spaced 120° apart, plus tonal variants. Vibrant without feeling random.
Tetradic uses four hues at 90° intervals, plus a fifth lighter accent. The richest of the five, also the easiest to overdo.

These relationships were codified before computer screens existed. They come from oil painting and printing traditions where adjacent hues physically interfere with each other. The maths is contemporary; the principle is centuries old.

Saturation matters as much as hue rotation. A triadic palette built from a low-saturation base reads as muted and editorial; the same triad at full saturation reads as carnival. The tool holds saturation constant so you can compare harmonies fairly, but final brand work usually involves stepping the saturation down deliberately for non-primary roles.

A palette is not a design system. It is the raw material: a collection of colours that work together. Turning that into a system means deciding which is body text, which is background, which is accent, which is destructive, which is for charts. The palette is upstream of all those decisions.

Frequently asked questions

What is a colour palette in design?

A coordinated set of colours used together across a brand or interface. Most design systems define 5–8 colours: a primary, one or two supporting tones, neutral greys for backgrounds and text, and status colours for success / warning / error states.

How many colours should a brand palette have?

Five to eight is the common range for working brand palettes. Beyond that, decisions get hard and consistency drifts. Below that, the brand feels constrained.

What’s the difference between a palette and a colour scheme?

In casual use they overlap. Strictly: a colour scheme is a relationship (analogous, complementary, etc.); a palette is a concrete set of colours derived from a scheme. The tool produces palettes from schemes.

Can I trust a generated palette without testing it?

No. Always run pairs through the Contrast Checker before committing. Colour theory says nothing about WCAG legibility, and a beautiful palette can still be unreadable.

Which harmony is best for SaaS interfaces?

Monochromatic or analogous tend to suit interface work because they reduce visual competition between elements. Triadic and tetradic are stronger for marketing material where each colour serves a distinct, separated purpose.

Can I generate a palette from a photograph?

Yes. Sample the dominant colour using the Colour Picker From Image, use that as the base here, and pick a harmony. This is the right workflow for brands built around imagery rather than graphic marks.

Why do my generated colours look different in Figma versus the browser?

Both render in sRGB by default, but Figma sometimes applies a P3 colour space when working with a P3 display. The hex values are the same; the rendered pixels differ slightly on wide-gamut hardware. For brand work, document the hex value as the source of truth and accept some rendering variance.

Is there a “correct” harmony for accessibility?

No harmony is more accessible than another by default. Every one of them can produce both passing and failing pairings. The harmony decides aesthetic relationship; contrast decides legibility, and you check that separately.

Common problems

Problem: The generated palette has a colour that looks completely wrong against the others.

This happens at extreme lightness values. A complementary harmony with one colour pushed to 90% lightness produces an off-white that reads as “broken” rather than “supporting”. Pull the lightness inward: anything below 15% or above 85% rarely works as a real palette member.

Problem: The triadic palette feels random and energetic, not coherent.

Triadic palettes need careful weighting in production. Use the base colour for ~70% of the design, the second hue for ~20%, the third for ~10% as accents. Equal weight across all three is what produces the “circus” feel.

Problem: Every palette I generate looks similar despite different harmonies.

Saturation is too low or too high. At extremes, hue rotation has less perceptual impact. Pick a base colour with middle-range saturation (around 60–80%) and the harmonies will produce visibly distinct results.

Problem: My palette looks great on screen but flat in print.

Print uses CMYK, not RGB; bright saturated colours that look vivid on screen often desaturate noticeably when printed. For palettes that need to live across both digital and print, do a CMYK preview test before locking the values, or shift to slightly more saturated source values knowing print will pull them back.

Tips

Triadic palettes feel energetic but break easily. Limit one of the three hues to small accents (icons, links, highlights) rather than treating all three as equal weight.
Complementary palettes are technically high-contrast but visually exhausting in equal proportion. Use the base for ~70%, the complement for ~10%, and the lightness variants to fill the remaining 20%.
If the generated palette has a colour you cannot place on the wheel, switch to monochromatic. Restrictions force better hierarchy decisions than abundance.
Random base colours from the shuffle button are surprisingly useful for breaking out of a stuck palette; anchoring back to your real base afterwards is one click.
Run any pair from the palette through the Contrast Checker before committing, because colour theory says nothing about WCAG.
Save the harmony you used alongside the palette. Six months later, “why these five colours?” is a much harder question to answer without that note.
For accessibility-critical work, prefer monochromatic with a clearly separated dark and light end; the contrast story is simplest to communicate and verify.

Related tools in this suite

Both tools sit in the Design Suite. The Contrast Checker is the natural follow-on: generate a palette here, verify any pair you intend to use for type against the WCAG ratio thresholds before locking it in. The Colour Picker From Image is the right starting point if your “base colour” is buried in a photograph or moodboard rather than already in hex form.

What this looks like at scale

A palette is the start, not the end, of brand colour work. Once a palette is locked, the next problem is enforcement: making sure it stays consistent across an entire site, product, or marketing system as different people add to it. That is design-system work, the kind of thing the systems we build absorb. The free tool gets you to a defensible palette; a real design system keeps it from drifting in year three.

Take it further

If the palette work is part of a larger brand or product redesign, talk to us about scoping the system around it. Turning a five-swatch starting point into a full design language with documented usage, accessible pairings, and code-level enforcement is a different scope of work.