Tool

Colour Palette Generator

Start with one colour. Get a balanced set of colours that belong together, with tints and shades you can copy straight into a design.

Palette generatorHarmonies, tints and shades from one colour

Base colour

Paste a HEX, RGB or HSL value, or use the picker.

Harmony

Calm and cohesive. The safest harmony for editorial layouts, branding and anywhere you want a settled feel.

Tints

Shades

Click any swatch to copy it. Tints add white, shades add black, and neither changes the hue — which is why a palette built this way stays coherent even as it gets lighter or darker.

How the palette generator works

Every palette here is derived from a single base colour plus a fixed geometric rule. Nothing is random and nothing is generated by a model, which means you can reproduce the same result tomorrow and understand exactly why each colour is present.

Set the base colour. Paste a HEX, RGB or HSL value, or use the system picker. Pick something you already know works — a brand colour, a paint sample, the dominant colour of a photograph.
Choose a harmony. Each option rotates around the wheel by a fixed set of angles. Analogous stays within 60 degrees, complementary jumps to the opposite side, triadic lands on thirds.
Take the tints and shades as well. The two lower rows are the same hue at different lightness levels. These are what turn a palette into a usable system: hover states, borders, backgrounds and text all need somewhere to live.

Choosing a harmony for the job

The right harmony depends on how much contrast the layout can absorb. A dashboard with dense text needs far less colour conflict than a poster with three words on it.

Offsets are relative to the base colour. Use the links to read the full treatment of each scheme.
Harmony	Feel	Good for
Analogous	Calm, unified	Editorial, documentation, brand systems
Complementary	Sharp, energetic	A single call to action, focal points, posters
Triadic	Playful, vivid	Children’s products, charts, event branding
Split-complementary	Bright but forgiving	Marketing pages that need energy and restraint
Tetradic	Rich, complex	Illustration, packaging, seasonal campaigns
Monochromatic	Quiet, systematic	Interfaces, data-heavy screens, long reading

Why tints and shades matter more than extra hues

A beginner’s palette usually has too many hues and too few variations. In practice, most of the colours in a finished interface are not new hues at all — they are the same hue at a different lightness. Button backgrounds, borders, disabled states, muted text and page backgrounds can all come from one hue if you have enough steps.

The tints and shades rows give you those steps. Copy two or three of each into your design tokens before you consider adding a second hue. You will usually find you do not need one.

The 60-30-10 rule, and when to ignore it

A common starting point is to give your dominant colour about sixty per cent of the visual area, a secondary colour thirty per cent, and an accent the remaining ten. It is a useful default because it prevents the most common failure: two colours competing for equal attention so that neither reads as important.

Ignore it when the design has a strong focal image, when the palette is monochromatic (where the split is expressed in lightness rather than hue), or when you are deliberately building a maximalist piece. The rule is a diagnostic, not a law — if a layout feels noisy, the proportions are usually the first thing worth checking.

Before you ship

Check three things. First, that the accent colour is used for one thing only, usually the primary action. Second, that every text and background pair passes the contrast thresholds. Third, that the palette still reads correctly in greyscale — if two colours become identical when the saturation is removed, the design will be hard to use for anyone with colour vision deficiency.

Frequently asked questions

What is a colour palette generator?

It takes one colour you already like and calculates the other colours that relate to it mathematically — the ones opposite, adjacent or evenly spaced around the wheel. The result is a set that looks intentional rather than assembled by guesswork.

Which harmony should I choose?

Start with analogous if you want calm, complementary if you need one strong accent, and triadic if the design should feel playful. Tetradic and split-complementary are for projects with enough room to balance four or three strong hues. The harmony guide compares them directly.

Are the palettes accessible?

Harmony guarantees that colours belong together, not that text is readable on them. Check any pair you intend to use for text with the contrast checker before shipping.

Why do tints and shades look better than extra hues?

Because they share a hue. Adding a fourth or fifth hue multiplies the number of relationships you have to manage, while adding tints of an existing hue adds variety at almost no cost to coherence.

Can I use these palettes commercially?

Yes. Colour values are not copyrightable, and nothing here is licensed. Use them in client work, products or print without attribution.

How many colours should a palette have?

Three to five is the useful range for most work: one dominant, one supporting, one accent, plus a neutral. Beyond five, people stop being able to tell the colours apart at a glance.