What is a colour harmony?

A rule for combining hues based on their positions on the colour wheel. Complementary colours sit opposite each other for strong contrast, analogous colours sit side by side for a calm look, and triadic colours are spaced 120° apart for a vibrant but balanced palette.

Why OKLCH instead of HSL?

HSL lightness doesn't match how we perceive brightness — yellow at 50% lightness looks far brighter than blue at 50%. OKLCH is perceptually uniform, so shades and harmonies built in it look evenly spaced.

How many colours should a brand palette have?

Most brands work well with one primary colour, one or two accents and a neutral scale for text and backgrounds. Five swatches with shades gives you plenty of room without clutter.

Can I use the palette with Tailwind CSS?

Yes. The Tailwind v4 export gives you an @theme block, so utilities like bg-blue-500 or text-rose-700 use your colours immediately.

Colour Palette Generator · Design

Free Colour Palette Generator

Build on-brand colour palettes with harmonies, 50–950 shades and ready-to-paste code.

100% free
No sign-up
Runs in your browser

Base colour

Harmony

Neighbouring hues — calm and cohesive.

or press Space

5 colours · lock the ones you love, regenerate the rest

blue

oklch(67.9% 0.175 246.2)

indigo

oklch(63.9% 0.192 266.2)

violet

oklch(59.9% 0.23 286.2)

purple

oklch(55.9% 0.23 306.2)

fuchsia

oklch(51.9% 0.207 326.2)

Shades 50–950

50100200300400500600700800900950

blue

indigo

violet

purple

fuchsia

Outlined cell = your exact swatch. Steps use an even OKLCH lightness ladder so 500 in one colour looks as bright as 500 in another.

Export

palette.css

:root {
  /* blue */
  --blue: #009efc;
  --blue-50: #eef7ff;
  --blue-100: #d9edff;
  --blue-200: #badeff;
  --blue-300: #88c7ff;
  --blue-400: #009efc;
  --blue-500: #008de1;
  --blue-600: #0075bd;
  --blue-700: #00609c;
  --blue-800: #004979;
  --blue-900: #00375d;
  --blue-950: #00223d;
  /* indigo */
  --indigo: #5582ff;
  --indigo-50: #f1f5ff;
  --indigo-100: #e0eaff;
  --indigo-200: #c8d9ff;
  --indigo-300: #a4bfff;
  --indigo-400: #769dff;
  --indigo-500: #5582ff;
  --indigo-600: #3e65da;
  --indigo-700: #3052b7;
  --indigo-800: #223e91;
  --indigo-900: #192e6f;
  --indigo-950: #0d1c4a;
  /* violet */
  --violet: #7c5cff;
  --violet-50: #f4f4ff;
  --violet-100: #e7e7ff;
  --violet-200: #d5d4ff;
  --violet-300: #bab7ff;
  --violet-400: #9b90ff;
  --violet-500: #7c5cff;
  --violet-600: #6d4de7;
  --violet-700: #5a3cc3;
  --violet-800: #452b9b;
  --violet-900: #332076;
  --violet-950: #20124f;
  /* purple */
  --purple: #973cdb;
  --purple-50: #f8f3ff;
  --purple-100: #f0e4ff;
  --purple-200: #e5ceff;
  --purple-300: #d4abff;
  --purple-400: #c07cff;
  --purple-500: #aa53f1;
  --purple-600: #973cdb;
  --purple-700: #782db1;
  --purple-800: #5e1e8c;
  --purple-900: #47176b;
  --purple-950: #2e0b47;
  /* fuchsia */
  --fuchsia: #a129a6;
  --fuchsia-50: #fff0ff;
  --fuchsia-100: #fedefd;
  --fuchsia-200: #fac4fa;
  --fuchsia-300: #ef9ff1;
  --fuchsia-400: #db72df;
  --fuchsia-500: #c34ec8;
  --fuchsia-600: #a129a6;
  --fuchsia-700: #8b2a90;
  --fuchsia-800: #6d1c71;
  --fuchsia-900: #531556;
  --fuchsia-950: #360938;
}

Generated in your browser. OKLCH values are gamut-mapped to sRGB, so every colour displays the same on any screen.

How it works

How to use Colour Palette Generator

Enter your base colour (hex, rgb, hsl or oklch) or use the picker.

Choose a harmony, then lock favourite swatches and press Space to generate new variations.

Copy the 50–950 shades as CSS variables, Tailwind v4 @theme, JSON or HEX.

About

About this tool

A good palette is the fastest way to make a website or brand look intentional. Start with one base colour — your logo colour, for example — and this generator builds a five-colour scheme using classic colour-wheel harmonies: analogous, complementary, split-complementary, triadic, tetradic or monochromatic.

Unlike most palette tools, the maths happens in OKLCH, a perceptual colour space. That means lightness steps look even to the human eye, so a 500 shade of blue feels as bright as a 500 shade of orange. Every colour is gamut-mapped to sRGB so it looks the same on every screen, and each swatch gets a full 50–950 scale for backgrounds, borders, hover states and text.

Lock the colours you like, press Space (or Generate) to reroll the rest, then copy the result as CSS variables, a Tailwind CSS v4 @theme block, JSON design tokens or a plain HEX list. Labels switch between black and white automatically so you can judge contrast at a glance.

Frequently asked questions

Free proposal

Want a brand and website that look this good? We design and build it end-to-end.

No obligation. A real strategist replies within 24 hours.

Keep going

More free tools

All free tools

ThemeT3NewTurn two brand colours and a font pairing into a full design system and DESIGN.md.Colour Picker & Contrast CheckerPick any colour, convert it to every format and check WCAG contrast instantly.Image CompressorShrink JPG, PNG and WebP images in bulk — privately, right in your browser.Open Graph Preview & CheckerPreview how links look on WhatsApp, LinkedIn, X and Facebook, and fix missing tags.

Done-for-you

Let's design a brand people remember

Free tools show you the problem. The T3 team fixes it, with a clear plan and pricing up front.

See our services Run a free website audit