Tiny Toolkit

Tailwind Shade Generator

Generate a complete 11-stop Tailwind CSS colour palette — 50 through 950 — from any base colour. 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 colour 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

Color Lightener & Darkener

Generate tints and shades of any color. Click any swatch to copy its HEX, RGB, or HSL code.

Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly.

Border Radius Generator

Visually build CSS border-radius values. Control each corner independently, toggle px or %, and copy the ready-to-use shorthand.