Enter a single base color (HEX) and instantly generate an 11-shade Tailwind palette (50-950). It uses an OKLCH lightness scale to spread shades evenly from a light 50 to a dark 950, pinning your input color to its nearest step. Click any shade to copy its HEX, or copy the whole palette as a Tailwind v4 @theme block, v3 config or CSS variables.
@theme {
--color-brand-50: #F4F8FF;
--color-brand-100: #E5EDFD;
--color-brand-200: #C2D5FC;
--color-brand-300: #9ABAF9;
--color-brand-400: #6F9CF7;
--color-brand-500: #3A70EB;
--color-brand-600: #1A55EA;
--color-brand-700: #1140B4;
--color-brand-800: #092B81;
--color-brand-900: #031851;
--color-brand-950: #020F38;
}Building UI in Tailwind, a single color is never enough. A button needs 600 at rest, 700 on hover, 800 when pressed, 50 or 100 for a tinted background, 200 for a border: at least half a dozen steps within the same family. What the design guide hands over, though, is usually one brand hex.
The tempting shortcut is to step the lightness evenly in HSL, but that muddies the middle of yellow ramps and crushes the dark end of blue ones, because the eye reads brightness differently at different hues.
This generator converts your hex into the OKLCH color space before building the ramp. OKLCH is designed so that its lightness channel matches perceived brightness, which means the same L value looks about equally bright whether the hue is yellow or blue. As a result, 500 sits at a comparable contrast to 500 and 700 to 700 even across different hue families.
It first measures the lightness of your color to find which of the eleven steps it belongs to and pins the original there, so your brand color survives untouched somewhere in the palette. The remaining steps are then filled in, with any combination that falls outside the displayable gamut pulled back into range.
Tailwind v4 declares tokens in a CSS @theme block as --color-{name}-{step}. On v3 they go into theme.extend.colors in tailwind.config.js as an object. Both formats are available to copy, so pick the one matching your project.
Once it is in, check contrast with the combinations you actually ship. WCAG AA asks for 4.5:1 for body text and 3:1 for large text and UI components. As a rough starting point, 600 and above works on white and 300 and below works on dark backgrounds, though yellow and lime ramps need to go darker still.
After generating, confirm your brand color is still present verbatim. That is what keeps the palette consistent with existing brand assets.
A light input means every dark step is invented. Those are the steps used for text and buttons, so check their contrast carefully.
Paste it into the @theme block in globals.css and classes like bg-brand-600 and text-brand-900 work immediately.
What it is, who it's for, how it works and why you'd use it.
Tailwind Palette Generator is a tool that builds an 11-shade Tailwind CSS color palette (50-950) from a single base color.
It is for front-end developers working with Tailwind CSS and designers who need to define color scales and design tokens.
Enter a base HEX and shades from 50 to 950 are generated along an OKLCH lightness scale; copy a shade by clicking it, or copy the palette as Tailwind config, an @theme block or CSS variables.
You get a consistent light-to-dark scale instantly without hand-tuning each step, speeding up design systems and theme tokens.