Tailwind Shade Generator
Generate a complete 50–950 Tailwind CSS color scale from any base color. Copy as tailwind.config.js.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#fef2f0',
100: '#fee6e2',
200: '#fbc5bb',
300: '#f69584',
400: '#ee664e',
500: '#e4391b',
600: '#b22c15',
700: '#892210',
800: '#64190c',
900: '#441108',
950: '#2e0b05',
},
...Tailwind CSS uses a numeric shade scale from 50 (lightest) to 950 (darkest). Use semantic names like 'primary', 'brand', or 'accent' instead of color names so you can easily retheme your project later.
Tailwind CSS Shade Generator — Build Custom Brand Colors for Tailwind
Tailwind CSS ships with a carefully crafted default color palette, but most production projects need custom brand colors that integrate seamlessly with Tailwind's utility system. Colaro's Tailwind Shade Generator takes any base color and produces a full 11-step scale (50 through 950) formatted as a ready-to-paste tailwind.config.js object — so your brand primary, secondary, and accent colors work with every Tailwind background, text, border, and ring utility out of the box.
How the Shade Scale Is Generated
The generator converts your base color to HSL, then creates perceptually uniform steps by adjusting the lightness channel while preserving the hue and moderate saturation shifts that prevent washed-out lighter tones or muddy darker ones. The algorithm mirrors the methodology used in Tailwind's own default palette, ensuring your custom colors feel visually consistent alongside Tailwind's built-in grays, blues, and other utility colors.
Integrating Custom Colors into Your Tailwind Project
Copy the generated object and paste it into your tailwind.config.js or tailwind.config.ts file under theme.extend.colors with your chosen color name (e.g., "brand", "primary", or "sage"). In Tailwind v4 projects using CSS-based configuration, paste the scale as CSS custom properties using --color-[name]-[shade] naming. Once configured, every Tailwind utility that accepts a color — bg-*, text-*, border-*, ring-*, shadow-*, and more — will support your full custom scale.
Which shade should I use for text vs background?
For light backgrounds, use shades 50–100. For body text on light backgrounds, use 800–900. For interactive elements, 500–600 typically provides the best balance of vibrancy and accessibility.
Can I use this with Tailwind v4?
Yes. For Tailwind v4, use the CSS custom properties output format. Define your scale as --color-brand-50, --color-brand-100, etc. in your CSS config file.