Color Palette Generator — harmony from any base

Pick a base colour, choose a harmony scheme, copy the resulting five-colour palette in hex or HSL. Useful for branding, UI design, and decks.

What is colour harmony?

Colour harmony is a set of rules from colour theory that describe which combinations look pleasing together. The rules are based on the relationship between hues on the colour wheel: analogous (adjacent), complementary (opposite), triadic (three evenly spaced), and so on. They give you a starting point that's far better than picking colours at random.

This generator computes the palette in HSL space, which is more perceptually meaningful than RGB for tasks involving hue. Pick any base colour and the tool produces five harmonious variations — drop them into your design system, hero gradient, illustration, or branding mood board. Click any swatch to copy the hex; click 'Copy all' to grab the whole palette as a comma-separated list.

How to use this tool

Pick your base colour with the colour picker, or paste a hex value directly. The five-colour palette regenerates instantly.
Try different schemes from the dropdown — monochromatic for subtle UIs, complementary for high-contrast accents, triadic for playful three-color brands.
Click any swatch to copy its hex value, or use 'Copy all' to grab the whole palette. The HSL value below each hex helps when you want to fine-tune in another tool.

Frequently asked questions

Which scheme should I use?

Analogous and monochromatic are safe defaults for almost any design. Complementary creates strong tension and works for accent pairs (e.g. button + page bg). Triadic is best when you want three balanced anchors; tetradic gives four but can feel busy unless one of them is a neutral.

What's the difference between shades and monochromatic?

Both keep the same hue. Monochromatic balances saturation and lightness for variety; shades only varies lightness, producing a darker-to-lighter ramp. Shades is perfect for typography (text, secondary text, muted text); monochromatic for design accents.

Why HSL and not RGB?

HSL separates hue from saturation and lightness, which matches how humans think about colour. Rotating hue keeps perceived saturation; rotating in RGB does not. The palette generator works in HSL for that reason and shows both formats below each swatch.

Will the palette work for accessibility?

Colour harmony alone does not guarantee accessible contrast. Always check the foreground/background pair against WCAG (4.5:1 for normal text, 3:1 for large text). For text colours, use the dark and light extremes of the palette, not the saturated middle ones.

Can I export to design tools?

Copy the hex values one by one, or use 'Copy all' to get them as a comma-separated list. Most design tools (Figma, Sketch, Adobe XD) accept hex on paste, and you can build a Figma styles set or a CSS custom-properties file in seconds.

Common use cases

Where a quick harmonious palette saves a lot of trial and error.

Brand colour exploration

Start with one colour your client likes and generate triadic and complementary options. Often the schemes surface candidates the client never asked for but immediately recognises as 'on brand'.

Marketing landing page

An analogous palette built from one hero colour gives consistent gradients and section accents without fighting the brand identity. Throw in one complementary swatch as the CTA button.

Data visualisation

Tetradic and triadic palettes give 3-4 distinguishable categorical colors. For sequential or diverging data, use shades or monochromatic.

Slide-deck themes

Build a deck-wide palette in seconds — a base colour for headlines, two analogous for section dividers, a complementary for callouts. Slides feel coherent without hand-tuning each one.

Tips and shortcuts

Habits that turn a generated palette into a working design system.

Lock the base, vary the scheme

Test all six schemes on the same base colour. The right scheme is rarely obvious from the start; flipping between them reveals which mood matches the brief.

Add neutrals separately

Most palettes benefit from a near-black, near-white, and a mid-grey for typography. Add them to your CSS variables alongside the generated swatches; the harmony scheme is for accents, not body text.

Test on real content

A palette in isolation can look great but turn ugly in the wild. Drop the colours into a header + button + body-text mockup before committing.

Don't blindly trust the wheel

Colour theory is a starting point, not a contract. If the generated complementary feels wrong, trust your eye and tweak the hue offset by 10-20°. The tool gives you a head start; the final taste call is yours.