Colour Palette Generator
Generate an 11-step colour palette from 50 to 950 from one brand colour, built in OKLCH so every step has consistent lightness, as CSS variables or a Tailwind theme.
Free · No sign-up · Your inputs stay in your browser
Input
Generate a colour palette (50 to 950)
Output
brand palette
| Step | Hex | OKLCH lightness |
|---|---|---|
| 50 | #f2f5fe | 0.970 |
| 100 | #e4e8ff | 0.935 |
| 200 | #cfd7fe | 0.885 |
| 300 | #b1bcfe | 0.810 |
| 400 | #8b96fe | 0.710 |
| 500 | #6c71ff | 0.620 |
| 600 | #5654e8 | 0.540 |
| 700 | #4440bf | 0.460 |
| 800 | #35319b | 0.390 |
| 900 | #28257b | 0.330 |
| 950 | #1a175a | 0.260 |
CSS custom properties
:root { --brand-50: #f2f5fe; --brand-100: #e4e8ff; --brand-200: #cfd7fe; --brand-300: #b1bcfe; --brand-400: #8b96fe; --brand-500: #6c71ff; --brand-600: #5654e8; --brand-700: #4440bf; --brand-800: #35319b; --brand-900: #28257b; --brand-950: #1a175a; }
Tailwind v4 (@theme)
@theme { --color-brand-50: #f2f5fe; --color-brand-100: #e4e8ff; --color-brand-200: #cfd7fe; --color-brand-300: #b1bcfe; --color-brand-400: #8b96fe; --color-brand-500: #6c71ff; --color-brand-600: #5654e8; --color-brand-700: #4440bf; --color-brand-800: #35319b; --color-brand-900: #28257b; --color-brand-950: #1a175a; }
Built in OKLCH: every step keeps the base hue and takes a fixed perceptual lightness, so 500 in one palette is as light as 500 in another and contrast pairs (say 700 text on 50) behave the same across colours. Chroma tapers towards the ends and is reduced wherever sRGB cannot show the colour, instead of clipping the hue.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
Why OKLCH
HSL's lightness is not perceptual: a yellow and a blue at 50% lightness look very different. OKLCH lightness is designed to match perception, so step 500 of a blue palette and step 500 of a green one have similar contrast against white, and a text and background pairing that works for one colour works for all. The colour space is defined in CSS Color Level 4.
Check contrast
A palette is a starting point. Check the pairs you actually use, such as 700 text on 50 background, with a contrast checker before shipping.