Graphics / Colour

Color Palette Generator: Harmonious Schemes in One Click

Generate colour palettes from colour theory: analogous, complementary, triadic, split complementary, monochrome, or random, from three to eight colours. Lock the ones you like and regenerate the rest, check each colour's contrast with white, and export the palette as CSS variables, a Tailwind config, JSON, hex codes, or a PNG.

Color Palette Generator: Harmonious Schemes in One Click: Each palette starts from a base hue, taken from a locked colour if you have one, and places the other hues by the chosen rule: 30° steps for analogous, the opposite hue for complementary, 120° steps for triadic, 150° either side for split complementary, or one hue from dark to light for monochrome. Lightness and saturation vary so the set has light, middle, and dark members, and every colour shows its WCAG contrast ratio against white. Runs 100% locally in your browser with zero server file uploads.

Category: Developer tools
Runs: In your browser
Cost: Free · no sign-up
Availability: Ready to use

Colour palette benchLocal processing

Runs entirely in your browser

HarmonyColours

Or press the space bar. Lock the colours you want to keep.

#64A6F52.5:1 on white

#382B9D10.5:1 on white

#772BB77.5:1 on white

#BE4BBA4.3:1 on white

#E0367B4.2:1 on white

Export as

:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

Using a palette

A common split is about 60% of one neutral colour, 30% of a second, and 10% of an accent, so the strongest colour is used sparingly for buttons and highlights.

Contrast

4.5:1 is the WCAG AA minimum for normal text and 3:1 for large text; 7:1 meets AAA.

How to use it

Choose a harmony and the number of colours.
Press generate or the space bar until you like it; lock colours to keep them.
Copy the palette as code or download it as a PNG.

Privacy & limitations

Everything is generated in your browser.

Related tools

Frequently asked questions

How do I keep a colour I like?

Click lock on it. Locked colours stay put, and the first one also sets the base hue the rest are built around.

Can I use my brand colour?

Yes: click a swatch to set it to any colour, lock it, and generate the rest around it.

Is the text on the palette readable?

Each swatch shows its contrast ratio with white. WCAG asks for at least 4.5:1 for normal text, so a colour below that needs dark text on it.

Free tool · runs in your browser · no account required