Tailwind Color Palette Generator
Build a 50 to 950 colour scale from one colour, in OKLCH so every step is even to the eye, ready to paste into a Tailwind theme.
Enable JavaScript to change the palette; the CSS below is for the defaults.
Any format: hex, rgb(), hsl() or oklch(). The scale keeps its hue.
Used in the class names: brand-500 becomes bg-brand-500.
1 keeps your colour's saturation. 0 gives a neutral grey ramp at the same hue.
Degrees across the ramp: a warm light end and a cool dark end is what hand-made palettes do.
Tailwind 4 puts the palette in CSS; 3 puts it in the config file.
- 50 #e9f6ff
- 100 #d8ecff
- 200 #b5d7ff
- 300 #8fbeff
- 400 #609aff
- 500 #3f7eff
- 600 #2963fa
- 700 · #1a4edb
- 800 #103cb6
- 900 #0e349d
- 950 #031960
@import "tailwindcss";
@theme {
--color-brand-50: oklch(97% 0.0349 264.04);
--color-brand-100: oklch(94% 0.0582 264.04);
--color-brand-200: oklch(88% 0.1047 264.04);
--color-brand-300: oklch(81% 0.1512 264.04);
--color-brand-400: oklch(71% 0.1977 264.04);
--color-brand-500: oklch(64% 0.2326 264.04);
--color-brand-600: oklch(56% 0.2326 264.04);
--color-brand-700: oklch(49% 0.221 264.04);
--color-brand-800: oklch(42% 0.1977 264.04);
--color-brand-900: oklch(38% 0.1745 264.04);
--color-brand-950: oklch(26% 0.1279 264.04);
}Build an eleven step colour scale from one colour, in OKLCH, so the steps are even to the eye rather than even in arithmetic.
How to use
- Type your colour. Hex,
rgb(),hsl()oroklch()all parse, and the scale keeps its hue. - Name it. The name is what the classes use:
brandgivesbg-brand-500. - Look at where your colour lands. The step closest to it is marked, which tells you whether you are holding a 500 or an 800.
- Adjust the chroma if the ramp is too loud or too quiet, and try a small hue shift for a warmer light end.
- Copy the format your project wants: a Tailwind 4 theme block, a Tailwind 3 config, plain custom properties, or the OKLCH values.
Example
@import "tailwindcss";
@theme {
--color-brand-50: oklch(97% 0.0349 264.04);
--color-brand-500: oklch(64% 0.2326 264.04);
--color-brand-950: oklch(26% 0.1279 264.04);
}The lightness numbers are fixed targets and the chroma follows a curve that peaks in the middle, which is what a hand-made palette does: a very light or very dark colour cannot hold much saturation.
Pitfalls
- A scale built in HSL has a step that jumps, because HSL lightness is arithmetic on the channels: yellow at 50% looks far brighter than blue at 50%. OKLCH lightness is perceptual, which is why this uses it.
- Pinning your exact colour puts one step off the curve. It is worth it when a brand hex is non-negotiable and worth avoiding otherwise.
- The step numbers are lightness, not importance.
brand-500is not “the brand colour”; it is the middle of the ramp, and your colour may belong at 700. - OKLCH can describe colours a screen cannot show. Values outside sRGB are clipped when converted to hex, so a very saturated ramp flattens at the ends.
- Text contrast does not follow the step numbers. Check the pair you actually use: 500 on white is often too light for body text even when 600 is fine.
- Eleven steps is a convention, not a requirement. Most interfaces use four or five of them; generating all eleven is cheap, using all eleven is a smell.
- A greyscale ramp is not the same as a desaturated brand ramp. Setting chroma to zero gives a neutral grey at your hue, which is useful for UI surfaces.
- Tailwind 4 reads the palette from CSS and Tailwind 3 from the config file. Pasting one into the other silently does nothing.
Compatibility
oklch() needs Chrome 111, Firefox 113 or Safari 15.4. Where that is too new, switch the output to hex: the values are the same colours, clipped to sRGB. The Tailwind 4 format uses @theme, which needs Tailwind 4; the config format is for Tailwind 3. The eleven step names and the spacing of their lightness follow Tailwind’s own palette. Everything runs in your browser.