Design / Colour
Tailwind Colour Scale Generator
Turn one brand colour into a full Tailwind CSS palette from 50 to 950, built in OKLCH like Tailwind's own colours, and copy it as Tailwind 4 theme CSS, a Tailwind 3 config, or CSS variables.
Tailwind Colour Scale Generator: Each shade takes the lightness, chroma, and slight hue drift that Tailwind's own palettes have at that step, measured in the OKLCH colour space, shifted so that your colour lands exactly on its shade. Greys follow Tailwind's grey families instead. Colours that the sRGB gamut cannot show are brought in with the CSS Color 4 gamut-mapping method, as browsers do; Tailwind 4 output keeps OKLCH values, and the other formats use hex. Runs 100% locally in your browser with zero server file uploads.
- Category
- Everyday tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Runs entirely in your browser
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
Shades follow the lightness, chroma, and hue drift of Tailwind's own palettes, measured in OKLCH, so a scale built from Tailwind's blue-500 comes within a few just-noticeable differences of Tailwind's blue. Colours outside the sRGB range are brought in with the CSS Color 4 gamut-mapping method.
Using the scale
A common pattern uses 50–100 for page and card backgrounds, 200–300 for borders, 500–600 for buttons and links, 700 for hover states, and 800–950 for text on light backgrounds. Check text and background pairs with the colour contrast checker.
To convert a single colour between hex, RGB, HSL, and OKLCH, use the colour converter; to start from a photo, the colour palette extractor.
Tailwind 4 and OKLCH
Tailwind CSS 4 defines its colours in OKLCH, which can describe colours beyond sRGB on wide-gamut screens. The Tailwind 4 output here stays within sRGB, so the colours look the same on every screen.
How to use it
- Pick your colour, or paste its hex code.
- Choose which shade it should be, usually 500, or let the generator place it.
- Copy the code for Tailwind 4, Tailwind 3, or plain CSS variables.
Privacy & limitations
Everything is generated in your browser.
Related tools
Frequently asked questions
Why OKLCH?
Equal steps in OKLCH lightness look like equal steps to the eye, across every hue, so a yellow and a blue scale built the same way match in contrast, which HSL does not manage.
Which shade should my brand colour be?
Usually 500 or 600, where Tailwind keeps its strongest colours. A very light colour such as a pastel fits better at 200 or 300; choose Automatic to place it by its lightness.
Will text be readable on these shades?
Typically, white text needs 600 or darker and dark text 400 or lighter, but check each pair with a contrast checker.
Free tool · runs in your browser · no account required