Tailwind Shade Generator
Generate a full Tailwind-style 50 through 950 scale from one base color and export it for your design system.
Features
Full 50-950 Scale
Generate the familiar Tailwind range so your palette is more useful for real interface work.
Custom Token Naming
Add a color name and export shade values in a cleaner design-token format.
Developer-Friendly Output
Copy values for CSS variables, Tailwind config, or internal theme files.
How It Works
Choose the brand, accent, or UI color you want to build around.
The tool creates lighter and darker shades across the full Tailwind-style range.
Copy the result into your codebase or design-system documentation.
Frequently Asked Questions
Related Tools
Convert a color between HEX, RGB, HSL, LAB, LCH, OKLAB, and OKLCH formats in one place.
Create polished color palettes with locks, exports, and strategy-based generation.
Search a compact reference of common Tailwind utility classes and their CSS output.