Tailwind shade generator
Pick one colour and get a full Tailwind-style scale from 50 (lightest) to 950 (darkest). Your colour stays exactly as it is; the other shades are built around it. Copy the result straight into your Tailwind v4 or v3 project.
● marks your colour. Click any shade to copy its HEX.
@theme {
--color-brand-50: oklch(97.7% 0.011 264.483);
--color-brand-100: oklch(95.3% 0.022 264.564);
--color-brand-200: oklch(90.7% 0.045 263.736);
--color-brand-300: oklch(84.2% 0.078 264.834);
--color-brand-400: oklch(76.1% 0.122 266.084);
--color-brand-500: oklch(70.4% 0.154 266.266);
--color-brand-600: oklch(61.7% 0.206 267.012);
--color-brand-700: oklch(54.4% 0.191 267.005);
--color-brand-800: oklch(46.9% 0.161 267.834);
--color-brand-900: oklch(41.1% 0.127 267.846);
--color-brand-950: oklch(27.9% 0.086 269.621);
} // tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f4f8ff',
100: '#e8f0ff',
200: '#d1e1ff',
300: '#b2cbff',
400: '#8dafff',
500: '#739aff',
600: '#4e78ff',
700: '#3e63dd',
800: '#3450b3',
900: '#2d448f',
950: '#182452',
},
},
},
},
}; :root {
--brand-50: #f4f8ff;
--brand-100: #e8f0ff;
--brand-200: #d1e1ff;
--brand-300: #b2cbff;
--brand-400: #8dafff;
--brand-500: #739aff;
--brand-600: #4e78ff;
--brand-700: #3e63dd;
--brand-800: #3450b3;
--brand-900: #2d448f;
--brand-950: #182452;
} How the shades are made
The shape of the scale comes from Tailwind's own default palette. For each step, we took the middle value across Tailwind v4's 17 colourful palettes for lightness, colourfulness and a small hue shift — and, separately, across its 9 grey palettes, because Tailwind's greys are darker at every step. A colour in between uses a blend of the two.
We tested this by rebuilding each of Tailwind's own palettes from its 500 shade. The average difference from the real palette is 2.4 for colourful palettes and 0.5 for greys (ΔE in OKLab; around 2 is the smallest difference most people can see).
Every shade stays inside the normal sRGB range, so the HEX and OKLCH values describe exactly the same colour.
Using the scale
Tailwind v4: paste the @theme block into your main CSS file after @import "tailwindcss";.
Then use classes like bg-brand-500 and text-brand-900.
Tailwind v3: paste the colors object into theme.extend in tailwind.config.js.
Want the built-in colours instead? See every Tailwind CSS color.
Questions
Why did my colour land on 600 instead of 500?
“Best fit” puts your colour on the step whose lightness is closest to it, so a dark colour lands on a darker step. To force a step, change “Put my colour at”.
Does this match Tailwind exactly?
No tool can, because Tailwind's palettes were tuned by hand. This one follows Tailwind's own curves, and the test above shows how close it gets.