Tailwind Color Generator
Enter any hex color and get a complete 50–950 shade scale formatted for Tailwind CSS. Copy the config snippet or CSS variables and paste directly into your project — no signup.
// tailwind.config.js / tailwind.config.ts colors: { 'brand': { 50: '#FBFAFF', 100: '#EDE9FE', 200: '#CFC7FC', 300: '#B0A5F9', 400: '#8D85F5', 500: '#6366F1', 600: '#514FD3', 700: '#3E39B6', 800: '#2A2399', 900: '#120B7D', 950: '#000070', }, }
How Tailwind's Shade Scale Works
Tailwind uses 11 fixed shade numbers — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — where the number loosely tracks lightness: 50 is the lightest (close to white), 950 is the darkest (close to black), and 500 is meant to be the "base" hue most people would recognize as the color's identity. This is the same system used by every Tailwind built-in palette (slate, red, blue, etc.) and why picking text-blue-500 versus text-blue-700 gives predictably different results.
When you add a custom color to your config, using this same numbering convention means all of Tailwind's existing utility classes work for your color exactly as they do for built-in colors — without needing to rename or remap anything.
Adding the Scale to Your Project
Tailwind v3 — tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#...',
// paste the rest here
950: '#...',
},
},
},
},
}Tailwind v4 — global CSS
@import "tailwindcss";
@theme {
--color-brand-50: #...;
--color-brand-100: #...;
/* paste CSS vars here */
--color-brand-950: #...;
}After adding, use your color with any Tailwind utility: bg-brand-500, text-brand-200, border-brand-700, ring-brand-300 — all work automatically. Run your dev server after adding; Tailwind generates the new utilities on the first save.
Choosing the Right Base Stop
The base stop is just how you tell the generator "this is where my color sits on the lightness scale." A quick reference:
| Stop | Typical character | Example use |
|---|---|---|
| 50–200 | Very light tint, almost pastel | Background fills, subtle highlights |
| 300–400 | Light-to-medium tint | Hover states, secondary badges |
| 500 | The recognizable base hue (Tailwind default) | Primary buttons, brand accents |
| 600–700 | Darker, richer shade | Pressed/active states, dark accents |
| 800–950 | Very dark, near-black | Dark-mode text, deep backgrounds |
Frequently Asked Questions
What is a Tailwind color shade scale?
Tailwind CSS uses a numbered shade system — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — where lower numbers are lighter and higher numbers are darker. This matches the convention used by Tailwind's own built-in palettes (slate, blue, emerald, etc.). When you add a custom color to your Tailwind config, it needs to follow the same structure so Tailwind's utility classes (bg-brand-500, text-brand-100, etc.) work as expected.
What does "base stop" mean?
The base stop is the shade number your input color is closest to. If you enter your brand's primary color and it looks like a medium hue — similar to Tailwind's blue-500 — set the base stop to 500. If your color is already a lighter tint, set it lower (400 or 300). If it's a deep, dark tone, set it higher (700 or 800). The generator anchors your exact hex at that stop and computes the rest of the scale by interpolating toward near-white (stop 50) and near-black (stop 950).
What color space does this use? Why not just darken/lighten the hex?
Simple darkening (subtracting from each RGB channel) looks mechanical and often produces desaturated, muddy greys rather than natural-looking lighter or darker versions of a hue. This generator uses LCH (lightness-chroma-hue), a perceptually uniform color space calibrated to human vision, so equal steps in the computation look equally different to the eye. The result matches the quality of Tailwind's own hand-tuned palettes without needing to hand-tune anything.
How do I add this to my Tailwind config?
Click 'Copy config' and paste the output into the colors section of your tailwind.config.js or tailwind.config.ts. In Tailwind v3: extend.colors.<name> = { 50: '...', ... }. In Tailwind v4, paste into your @theme block as CSS variables. If you use the 'Copy CSS vars' option, paste the :root block into your global CSS file and reference the variables in your Tailwind config using var(--color-<name>-<stop>).
Will the generated scale work with Tailwind v4?
Yes. Tailwind v4 uses CSS variables for its design system, so both output formats work: the config format is for v3 (tailwind.config.js extend.colors), and the CSS variables format is native to v4's @theme block. Copy the CSS vars output and declare each variable inside @theme in your CSS file.