Colour Palette Generator

Build harmonious colour palettes from one base colour.

Base colour

Picker

Harmony rule

Neighbouring hues 30° apart — calm and cohesive.

#46DCE5Base

#468CE5

#4F46E5

#9F46E5

#E546DC

HEX	RGB	HSL	On white	On black
#46DCE5	rgb(70, 220, 229)	hsl(183.4, 75.4%, 58.6%)	1.7:1	12.6:1
#468CE5	rgb(70, 140, 229)	hsl(213.6, 75.4%, 58.6%)	3.4:1	6.1:1
#4F46E5	rgb(79, 70, 229)	hsl(243.4, 75.4%, 58.6%)	6.3:1	3.3:1
#9F46E5	rgb(159, 70, 229)	hsl(273.6, 75.4%, 58.6%)	4.7:1	4.5:1
#E546DC	rgb(229, 70, 220)	hsl(303.4, 75.4%, 58.6%)	3.4:1	6.2:1

Full scale

#F3F2FC50

#E7E6F9100

#C3C0F6200

#9D98F1300

#6E67EA400

#443AE3500

#291ED7600

#2219B3700

#1B148F800

#140F6B900

#110E3F950

Export format

Export

:root {
  --palette-1: #46dce5;
  --palette-2: #468ce5;
  --palette-3: #4f46e5;
  --palette-4: #9f46e5;
  --palette-5: #e546dc;

  --brand-50: #f3f2fc;
  --brand-100: #e7e6f9;
  --brand-200: #c3c0f6;
  --brand-300: #9d98f1;
  --brand-400: #6e67ea;
  --brand-500: #443ae3;
  --brand-600: #291ed7;
  --brand-700: #2219b3;
  --brand-800: #1b148f;
  --brand-900: #140f6b;
  --brand-950: #110e3f;
}

What does Colour Palette Generator do?

Generate colour palettes using established harmony rules — complementary, analogous, triadic, tetradic, split-complementary and monochromatic — from any base colour. Contrast ratios are checked so you know which combinations are readable.

How to Use Colour Palette Generator

1
Pick a base colourType a hex value or use the picker.
2
Choose a harmonyEach rule produces a different relationship.
3
Check the contrastReadable pairings are marked.
4
ExportCSS variables, Tailwind config or plain hex.

Key Features

Eight harmony rules, each explained in plain terms
Full 50–950 tint and shade scale generated from your base colour
WCAG contrast ratio against black and white for every swatch
Export as CSS custom properties, Tailwind config, JSON or a hex list
Random base colour button for exploring

Frequently Asked Questions

What is a complementary colour scheme?

Two hues directly opposite on the colour wheel, 180° apart. It gives maximum contrast and energy, but is hard to balance — use one as the dominant colour and the other sparingly as an accent.

Which harmony should I choose for a website?

Analogous or monochromatic for a calm, cohesive interface, with a single complementary accent for calls to action. Triadic and tetradic are vivid but need careful weighting or they compete.

How many colours does a design system need?

Fewer than most people use. One primary with a full tint scale, one accent, and a neutral grey ramp covers almost everything. Semantic colours for success, warning and error are usually the only additions.

Why does contrast matter?

Because WCAG 2.2 requires 4.5:1 for normal text and 3:1 for large text and UI components. A palette that looks beautiful but fails contrast excludes users with low vision and can create legal exposure.

Runs in your browser

Everything is generated in your browser. Nothing is sent to a server, so results are private and the tool keeps working offline.

How the rest of the site handles data