How to Generate a Custom Tailwind CSS Color Scale
Tailwind's built-in color palette covers most needs, but brand colors rarely match a pre-defined shade. The Tailwind Color Scale generator takes any base color and produces a complete 50-950 scale that follows Tailwind's naming convention and lightness distribution — ready to paste into your tailwind.config.js.
- Build a complete 50-950 color scale from any base color for Tailwind CSS.
- Why Generate Custom Scales?.
- Covers generating your scale.
- Covers checking scale quality.
- Covers integration with tailwind.
Why Generate Custom Scales?
Brand colors need full shade ranges for different UI states: 50-100 for backgrounds, 200-300 for borders, 400 for secondary text, 500 for the base brand color, 600-700 for hover states, 800-900 for dark text. Tailwind's built-in colors provide this range, but custom brand colors don't — the scale generator fills this gap.
Generating Your Scale
Enter your brand color (the value that will become the 500 shade). The tool generates 11 shades from 50 (near-white tint) to 950 (near-black shade) with perceptually balanced lightness steps. The output includes the complete Tailwind config object you can paste directly into the extend.colors section of tailwind.config.js.
Checking Scale Quality
A good scale has perceptually even steps — each shade should be visually equidistant from its neighbors. The tool checks contrast ratios between text colors (800-950) and background colors (50-200) to ensure accessibility. If any combination fails WCAG AA, it's flagged so you can adjust.
background-size animation or @property registered custom properties instead.Integration with Tailwind
Paste the generated config into your tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#fef2f2',
100: '#fde8e8',
...
900: '#7f1d1d',
950: '#450a0a',
}
}
}
}
}
This creates utilities like bg-brand-500, text-brand-900, border-brand-200 throughout your project.