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
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)
Palette: #009efc, #5582ff, #7c5cff, #973cdb, #a129a6
Shades 50–950
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
: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
- 1
Enter your base colour (hex, rgb, hsl or oklch) or use the picker.
- 2
Choose a harmony, then lock favourite swatches and press Space to generate new variations.
- 3
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
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.