How to use the Tailwind Color Palette Generator
- 1. Enter your colourYour brand hex code and a name such as brand.
- 2. Choose outputTailwind v4 @theme variables or a v3 config file.
- 3. Paste and useUse classes like bg-brand-500 and text-brand-700.
Worked example
The accent #FF5421 has an OKLCH lightness of 67.6%, closest to the 400 step, so the summary says your colour sits at brand-400 and keeps your exact colour there. The other ten steps use lightness levels similar to Tailwind's own palettes, from 97.1% at 50 to 28.3% at 950, keep your hue of about 36°, and scale chroma so the lightest and darkest steps are softer. For example brand-500 is oklch(63.7% 0.211 35.8) and brand-950 is oklch(28.4% 0.097 36.1).
The table shows contrast on white for every step and names the lightest step that reaches 4.5:1, the safe choice for body text.
v4 and v3 output
- Tailwind CSS v4 defines colours as CSS variables in an @theme block, and its default palette uses OKLCH, so the output does the same, with hex values in a comment.
- Tailwind CSS v3 uses theme.extend.colors in tailwind.config.js with hex values.
- Colours outside the sRGB range are pulled back by reducing chroma, so every step displays the same on all screens.
Generated scales are a strong starting point, but check them by eye: some hues, such as yellow, look better with hand-tuned steps. This tool is independent and not made by Tailwind Labs. Compare with simple tints in the colour shades generator, store your palette with the design tokens JSON generator, and check it with the colour blindness simulator.
Frequently asked questions
Why does my colour land on 400 instead of 500?
Steps are chosen by lightness. Bright colours like orange and yellow are naturally light, so they match a lighter step. Choose No for keep exact colour if you prefer an even scale.
Will OKLCH work in all browsers?
OKLCH is supported in current versions of all major browsers. Use the hex values from the v3 output if you must support very old browsers.
Is the Tailwind Color Palette Generator free?
Yes, the Tailwind Color Palette Generator is free. The first time you generate your first palette, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.