Color Palette Generator

Great colour schemes are rarely accidents — they follow geometry on the colour wheel. Pick any base colour and this generator builds four classic harmonies from it: complementary (opposites that vibrate), analogous (neighbours that soothe), triadic (three evenly spaced hues that balance energy) and monochrome (one hue in five lights and shades). Every swatch shows its hex code and copies with a click, ready for your design tool, stylesheet or brand board. A harmony scheme is a starting skeleton, not a finished palette. Production palettes adjust each scheme colour for role: the colour that sings at full saturation as an accent may need darkening two steps to work as text, and one scheme member usually gets muted into the neutral-with-a-hint that backgrounds and borders are made of. Generate the harmony here, then tune lightness per role — the hue relationships the scheme guarantees are the part that is tedious to derive by hand.

Quick Answer: Pick a base colour and instantly get complementary, analogous, triadic and monochrome palettes — five swatches each, every hex code one click from your clipboard.

Free Online Tool

Base colour

How to Use the Color Palette Generator

Choose your base colour with the picker or type a hex value.
Browse the four harmony rows that appear instantly.
Click any swatch to copy its hex code.
Assemble your final scheme: a primary, a support and an accent usually suffice.
Paste the codes into your design tool or CSS variables.

Key Features

Four colour-wheel harmonies from one base colour
Twenty swatches per generation, all click-to-copy
Works with the colour picker or a typed hex code
Random base colour button for instant inspiration
Free with no sign-up

Best Practices and Tips

Use the 60-30-10 rule: dominant colour 60%, secondary 30%, accent 10% — palettes give you the cast, you assign the roles.
Monochrome schemes are the safest for professional dashboards and documents.
Complementary pairs are powerful but intense; soften one side with a tint or shade from the monochrome row.
Check text contrast on your chosen backgrounds before committing to a scheme.
Save palettes you like as CSS variables so a whole project recolours in one edit.
Check any text/background pairing from your palette against a contrast checker before shipping; harmonious and legible are separate properties, and only one of them is guaranteed by maths.

Common Mistakes to Avoid

Using all twenty swatches — a palette is a starting point for selection, not a shopping list.
Pairing saturated complementary colours at full strength for body text.
Judging colours on an uncalibrated screen and skipping a phone check.
Forgetting colour-vision differences: never encode meaning by colour alone.

Frequently Asked Questions

What is a complementary colour?

The colour directly opposite on the colour wheel — blue and orange, red and green. Opposites maximise contrast and energy.

What does analogous mean?

Colours neighbouring your base on the wheel. They share undertones, producing calm, cohesive schemes often found in nature.

What is a triadic scheme?

Three colours spaced 120° apart on the wheel. Triadic schemes stay balanced while offering strong variety.

How do I use the hex codes in CSS?

Paste them as values like color: #4f46e5, or define variables: :root { –brand: #4f46e5; } and reuse them across your stylesheet.

Is this palette generator free?

Yes — free, unlimited and no sign-up required.

What is a split-complementary scheme?

A base colour plus the two colours flanking its complement. It keeps most of complementary’s contrast while being noticeably easier to balance — a favourite for editorial design.