Tailwind Color Shade Generator
Generate custom Tailwind CSS color shades — create a full 50–950 scale from any brand color.
Published:
Tags: Tailwind color shade generator, custom Tailwind colors, Tailwind color scale tool
Tailwind Color Shade Generator A Tailwind color shade generator produces an 11-step scale (50 through 950) from any input color. The output drops directly into , giving you classes like , , and across your entire project. For a full overview of color utilities, see the Color Tools for Designers and Developers guide. --- What Is the Tailwind Color Scale? Tailwind's built-in colors (slate, blue, emerald, etc.) each have 11 shades: | Shade | Approximate Lightness | Common Use | |---|---|---| | 50 | ~97% | Subtle backgrounds, hover states | | 100 | ~95% | Card backgrounds | | 200 | ~90% | Borders, dividers | | 300 | ~80% | Disabled text | | 400 | ~65% | Placeholder text | | 500 | ~50% | Primary brand color | | 600 | ~40% | Hover state of primary | | 700 | ~30% | Active/pressed state | | 800 |…
Frequently Asked Questions
How do I create custom Tailwind colors?
Add a `colors` key under `theme.extend` in your `tailwind.config.js`. Define your color as an object with numeric keys (50, 100, 200, ..., 900, 950) and HSL or hex values. A shade generator creates all 11 stops from a single input color, ready to paste directly into config.
What is the Tailwind color scale?
Tailwind uses an 11-step numeric scale: 50 (lightest near-white), 100–900 in 100 increments, and 950 (darkest near-black). Each step represents a specific lightness value in HSL space. The scale mirrors how designers talk about 'light blue' vs 'dark blue' without inventing arbitrary names.
How do I add a custom color to Tailwind config?
Generate your shade scale, then add it to `tailwind.config.js` under `theme.extend.colors`. Use an object where keys are the shade numbers and values are hex or HSL strings. After saving, Tailwind generates all utility classes (`bg-brand-500`, `text-brand-300`, etc.) automatically.
What is HSL interpolation in Tailwind?
Tailwind's shade generator interpolates lightness linearly in HSL space between a near-white value (high L%) for shade 50 and near-black (low L%) for shade 950. Saturation is optionally reduced at the extremes to prevent artificial-looking very light or very dark shades.
How do I create a dark mode color scale?
For dark mode, you typically invert the shade usage — use shade 400 where you'd use 600 in light mode, and 700 where you'd use 200. Tailwind's `dark:` variant makes this straightforward. You can also define semantic CSS variables that remap shades between modes without duplicating component classes.
All articles · theproductguy.in