Generate a complete 11-step colour palette (50–950) from any hex colour following Tailwind CSS conventions. Export as CSS custom properties, Tailwind config, or hex table.
Open Color Shade Generator → free, no sign-inDesign systems need more than a single brand colour — they need a full palette of tints and shades for different states, backgrounds, and text. The Color Shade Generator takes any hex colour and produces an eleven-step palette (50 through 950) following Tailwind CSS conventions. Export the result as CSS custom properties, a Tailwind config snippet, or a plain hex table — whichever format your project needs.
Frontend developers building or extending a design system, designers creating component tokens, anyone adding a new colour to a Tailwind project who wants a balanced, harmonious scale rather than eyeballing shades manually.
No tutorials. No learning curve. Open it and get started.
No server uploads. The eleven-step 50–950 scale matches Tailwind's palette structure exactly, so the output slots directly into any Tailwind project.
Completely free. No trial period. No premium tier for basic functionality. No account required. Use it as often as you need.
One job, done well. Color Shade Generator was built to solve a specific problem cleanly. No feature bloat, no ads, no distractions.
What does the 50–950 scale represent?
It's the standard scale used by Tailwind CSS, where 50 is the lightest tint and 950 is the darkest shade of a colour.
Can I use this without Tailwind?
Yes — the CSS custom properties export works with any CSS framework or vanilla CSS.
Does the base colour appear in the scale?
The 500 step typically represents the base colour in the standard Tailwind scale.
How is the palette generated?
The tool adjusts lightness while maintaining the hue and saturation of your base colour.
Can I export for Figma?
Export the hex table and import it into your Figma design token setup.
Free. Instant. No sign-in. Open it and get the job done.
Open Color Shade Generator on Doathingy.com →