Tailwind Color Shades Generator
Turn any hex color into a full Tailwind CSS shade scale from 50 to 950, ready to paste into your config.
Your color stays exact on the shade you pick; the other ten steps follow Tailwind’s ramp.
How it works
Pick a brand color and the generator builds a full Tailwind CSS shade scale — 50, 100,
200 … 900, 950 — around it. The color is converted to HSL, the hue and saturation are
kept, and the lightness of every step follows the same ramp Tailwind’s own palettes
use, shifted so that the shade you choose (500 by default) is your input color exactly,
to the hex digit. Switch the output between a tailwind.config.js color
object, Tailwind v4 @theme CSS variables, or plain JSON, then copy it or
download it as a file. Click any swatch to copy just that hex. All of the color math runs
in your browser with JavaScript — no sign-up, no ads, and nothing is uploaded.
Frequently asked questions
How do I generate Tailwind color shades from one hex code?
Paste your brand hex into the color field and pick which step it should be, 500 by default. The generator keeps your hue and saturation, rebuilds Tailwind's lightness ramp around that anchor, and outputs all eleven shades (50, 100, 200 … 900, 950). The anchor step is your exact hex, unchanged. Copy the tailwind.config.js block, or download it as a file.
What do the Tailwind shade numbers 50 to 950 mean?
They are lightness steps, not opacity. 50 is the lightest tint (backgrounds, subtle fills), 500 is the mid-tone most brands use as their main color, and 950 is the darkest shade (text on light backgrounds, dark-mode surfaces). Tailwind uses the same 50–950 scale for every built-in palette, so a custom color built this way drops straight into classes like bg-brand-100 or text-brand-900.
Can I use these shades in Tailwind CSS v4?
Yes. Switch the output format to "CSS @theme (v4)" and you get the shades as --color-brand-50 … --color-brand-950 custom properties inside an @theme block, which is how Tailwind v4 registers colors. For v3 and earlier, keep the tailwind.config.js output and paste it under theme.extend.colors. JSON is there for design tokens and other tooling.