How to Generate a Color Palette That Actually Works Together

By Daniel · Updated July 2026

Picking colours at random rarely looks good; colours that share a mathematical relationship on the colour wheel almost always do. A palette generator applies that colour theory for you, turning one base colour into a set that belongs together.

The common harmonies

  • Complementary — opposite colours; high contrast, bold.
  • Analogous — neighbours on the wheel; calm and cohesive.
  • Triadic — three evenly spaced colours; balanced and vivid.
  • Monochromatic — one hue in several shades; clean and safe.

How to build one

  1. Open the palette generator.
  2. Choose a base colour and a harmony type.
  3. Copy the hex codes into your design or stylesheet.

The 60-30-10 rule

A palette is only half the job; how you use it decides whether a design looks calm or chaotic. A reliable rule is 60% a dominant neutral, 30% a secondary colour, and 10% an accent for buttons and highlights. Most amateur designs go wrong by using every colour in equal amounts.

Always keep a near-black and a near-white in your palette for text and backgrounds. A palette of only mid-tones is beautiful in the swatch and unreadable on a real page.

Color Palette Generator
Generate harmonious palettes from a base colour, in your browser.
Open the tool →

Common questions

How many colours should a palette have?

Three to five is plenty for most projects: a dominant, a secondary, an accent, plus a dark and a light for text and backgrounds.

What is the 60-30-10 rule?

A guideline for proportions: 60% dominant colour, 30% secondary, 10% accent. It keeps designs balanced.

Will these colours pass accessibility checks?

Not automatically — always check text-and-background pairs with a contrast checker.

Is the tool private?

Yes, it runs in your browser.

Keep reading

How to Check Color Contrast · How to Create a CSS Gradient · How to Convert HEX to RGB