A single brand color is not enough for a polished UI — you need a full scale of tints and shades. Use our free Color Palette Generator to create a Tailwind 50–950 scale from any hex. Part of our Complete Developer Tools Guide.
What Is a Tailwind Color Scale?
Tailwind uses 11 shades per color: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Shade 500 is typically the base brand color. Lighter shades work for backgrounds; darker shades for text and hover states.
Why You Need a Palette, Not Just One Color
Consistent UI requires semantic shades — backgrounds, borders, text, and hover states all need different tones of the same hue. A single hex cannot serve all these purposes without looking flat or inaccessible.
HSL Color Space for Palette Generation
HSL (Hue, Saturation, Lightness) makes tint and shade generation predictable. By keeping hue constant and adjusting lightness, you get harmonious scales that feel native to Tailwind's built-in colors.
WCAG Contrast and Why It Matters
WCAG AA requires 4.5:1 contrast ratio for normal text. Our generator badges each shade with whether white or black text passes. Use lighter shades (50–200) for backgrounds and darker shades (700–950) for text on light backgrounds.
How to Add Custom Colors to tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
500: '#4f8ef7',
950: '#0a1628',
}
}
}
}
}CSS Custom Properties Approach
For non-Tailwind projects, copy the CSS variables output and use var(--color-brand-500) anywhere. Related tools: Glassmorphism Generator, CSS Gradient Generator, Box Shadow Generator. Guide: Glassmorphism CSS generator guide.
Frequently Asked Questions
What is a Tailwind color scale?
Tailwind CSS uses a numeric scale from 50 (lightest) to 950 (darkest) for colors — 11 shades total. This systematic approach ensures visual consistency: shade 50 works for backgrounds, 200-300 for borders, 500 for primary actions, 700-800 for text on light backgrounds, and 900-950 for dark mode backgrounds.
How do I add a custom color palette to Tailwind?
Add your custom colors in tailwind.config.js under theme.extend.colors: { yourColorName: { 50: '#hex', 100: '#hex', ..., 950: '#hex' } }. This makes classes like bg-yourColorName-100 or text-yourColorName-700 available throughout your project.
What is WCAG contrast ratio and why does it matter?
WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in lightness between text and background. A ratio of 4.5:1 or higher (AA compliance) is required for normal text, 3:1 for large text. This ensures readability for users with visual impairments and is increasingly required for legal compliance.
Can I use this palette in non-Tailwind projects?
Yes — the CSS variables output (--color-brand-50 etc.) works in any CSS project. Define the variables in :root and use them as var(--color-brand-500) anywhere in your CSS or inline styles.