Tailwind shade generator — a full scale from one colour
Enter one base colour and get a complete Tailwind-style shade scale (50 to 950) with CSS variables. It generates entirely in your browser (0 uploads, works offline).
How to use it
- Enter a base colour (hex, rgb or name).
- The 11-stop scale renders with swatches.
- Copy the CSS variables or download them.
FAQ
How do I generate a colour shade scale for free?
Enter a base colour and this page walks its lightness through the familiar 50–950 stops, keeping the hue and saturation, and gives you ready-to-paste CSS custom properties — on your device with no upload.
Does it match Tailwind's exact palette?
It produces a Tailwind-shaped scale from your colour, not Tailwind's hand-tuned defaults. It is ideal for building a custom palette that follows the same 50–950 structure.
Is my colour uploaded anywhere?
No. The scale is generated entirely in your browser and nothing is transmitted or stored, which you can verify by turning off your Wi-Fi.
What format are the outputs?
CSS custom properties like --color-500, which drop straight into a :root block or a design-token file.
Limits
Generates a lightness-based scale from one colour; it does not perceptually tune each stop the way a hand-built palette might.
Related
The colour-blindness simulator checks accessibility; the palette generator builds harmonies.
Bookmark this page (Ctrl+D, or ⌘D on Mac) or install the app — it works offline the next time you need it.