Design tool
Tailwind Color Shade Generator
Turn one colour into a full 50 to 950 Tailwind-style scale with contrast hints, and export a Tailwind v3 config, a v4 theme block or CSS variables.
Free, no sign-up. Runs in your browser; nothing is uploaded.
Base colour
Scale
Each tile shows the better of white or black text on that shade and its WCAG rating. Contrast numbers are shown as ratios, 4.5 or more passes AA for body text.
Export
/* app.css (Tailwind v4) */
@theme {
--color-brand-50: #f2f2fd;
--color-brand-100: #e8e8fc;
--color-brand-200: #cecffb;
--color-brand-300: #afb0f8;
--color-brand-400: #898bf4;
--color-brand-500: #6366f1;
--color-brand-600: #2f33ec;
--color-brand-700: #1519ce;
--color-brand-800: #12159f;
--color-brand-900: #111376;
--color-brand-950: #0a0b3d;
}How to use the tailwind color shade generator
A complete colour scale from one hex code
Design systems need more than one blue. They need a pale tint for backgrounds, a mid tone for buttons and a deep shade for text. This generator builds all eleven steps, 50 through 950, from a single colour and exports them in the formats developers use.
How to use it
- Pick a colour or type a hex code.
- Name the colour, for example brand or accent.
- Choose which step your colour represents. The default is 500; lighter brand colours often work better at 300 or 400.
- Review the tiles, then copy the export you need.
Reading the tiles
Each tile shows the hex value, the better text colour (white or black) and the contrast ratios against both. The label inside the tile tells you if that pairing passes WCAG: AAA for 7:1 and above, AA for 4.5:1, AA large for 3:1 for big or bold text, otherwise Fail. Use this to choose button and badge combinations that stay readable.
Export formats
- Tailwind v4: an @theme block with --color-name-step variables. Drop it into your main CSS file.
- Tailwind v3: an object for the colors section of tailwind.config.js.
- CSS variables: a :root block that works with any stack.
Using the scale well
- Backgrounds usually use 50 to 100, borders 200 to 300, solid buttons 500 to 600 and hover states 700.
- Text on light backgrounds should use 700 or darker.
- Dark mode flips the scale: dark surfaces use 900 to 950, and text uses 100 to 300.
- Check every pair. Always test the exact foreground and background combination you ship.
- Keep neutrals separate. Use a grey scale for text and surfaces, and your brand scale for accents.
Privacy
Colour processing happens locally in your browser. No data is stored or shared.
Frequently asked questions
How are the shades calculated?
Your colour keeps its hue and sits at the shade you choose, usually 500. Lighter shades move toward a pale tint and darker shades toward near-black, with saturation eased at the extremes.
Can I make my colour a different shade?
Yes. Use the "Use as shade" menu. A very light brand colour often belongs at 200 or 300, a dark one at 700 or 800.
What do the contrast numbers mean?
They are WCAG contrast ratios against white and black. 4.5 or more passes AA for normal text. Each tile shows whether white or black text reads better on it.
How do I use the Tailwind v4 output?
Paste the @theme block into your CSS. Classes like bg-brand-500 and text-brand-700 become available automatically.
Will my colour match the official Tailwind palette?
No, it is an original scale built from your colour, designed to feel similar in step size and contrast.
Is anything sent to a server?
No, the colour maths runs in your browser.