Tiny Toolkit

Tailwind Shade Generator

Generate a complete 11-stop Tailwind CSS color palette — 50 through 950 — from any base color. Export as a ready-to-paste tailwind.config.js object or as CSS custom properties for use in any framework. Useful when extending a Tailwind project with a custom brand color that needs to integrate naturally with the built-in palette structure.

All processing happens in your browser. No data is sent to any server.

Frequently Asked Questions

How many shades does it generate?
It generates 11 stops (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950), matching the full Tailwind CSS palette structure.
Can I export the palette for use in tailwind.config.js?
Yes. The tool outputs a ready-to-paste JavaScript object you can drop straight into the colors section of your Tailwind configuration.
Can I export as CSS custom properties instead?
Yes. Switch to the CSS variables tab to get the palette as --color-* custom properties that work with any CSS framework.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Lightener & Darkener — Generate Tints and Shades

Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.