Tailwind Color Guide
Complete reference to the Tailwind CSS color palette — all 19 families, how they are designed, and how to use or customize them.
What Is the Tailwind Color Palette?
Tailwind CSS ships with a curated color palette of 19 color families, each with 10 shades from 50 (lightest) to 900 (darkest). It is one of the most popular color systems in modern web development because it is carefully tuned, perceptually consistent, and instantly usable.
The 19 families:
slate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
Why Tailwind Colors Are Different
Unlike a naive color scale (which just multiplies lightness by a factor), Tailwind colors are hand-tuned so that:
- Perceptual consistency: "blue-500" and "red-500" feel equally weighted, even though the actual hex values differ significantly
- Even lightness steps: The distance from 400 to 500 is visually similar to the distance from 600 to 700
- Reduced saturation at extremes: 50 and 900 are less saturated than 500, mimicking how real colors behave at extreme lightness
- Consistent hue within a family: Every step in the "blue" family shares the same hue
The 50-900 Scale
Every family uses the same 10-step scale:
| Step | Typical Use |
|---|---|
| 50 | Page backgrounds, subtle surfaces |
| 100 | Card backgrounds, hover states |
| 200 | Borders, dividers |
| 300 | Disabled states, placeholder text |
| 400 | Dark mode borders, inactive icons |
| 500 | Base color (primary buttons) |
| 600 | Hover states for primary |
| 700 | Active/pressed states |
| 800 | Strong text, dark UI |
| 900 | Headings, darkest text |
Using Tailwind Colors
Utility classes
<div class="bg-blue-500 text-white">
<button class="bg-blue-600 hover:bg-blue-700">
Click me
</button>
</div>Arbitrary values
<div class="bg-[#155EEF] text-[#FFFFFF]">Customizing the palette
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#EAF1FF',
500: '#2563EB',
900: '#0A3BAA',
}
}
}
}
}Color Family Overview
Neutrals
- Slate: Blue-tinted gray. Modern, cool feel.
- Gray: Standard neutral gray. Warm and neutral.
Warm colors
- Red: Bright, energetic, warning.
- Orange: Friendly, energetic, food-friendly.
- Amber: Warm gold, warning-adjacent.
- Yellow: Optimistic, high-visibility.
Green spectrum
- Lime: Bright yellow-green, playful.
- Green: Balanced, natural green.
- Emerald: Rich, jewel-tone green.
- Teal: Blue-green, professional.
Cool spectrum
- Cyan: Bright, modern aqua.
- Sky: Light, airy blue.
- Blue: Standard blue, professional.
- Indigo: Deep blue-purple, tech-friendly.
- Violet: Rich purple, creative.
- Purple: Classic purple.
- Fuchsia: Bright magenta.
- Pink: Playful pink.
- Rose: Warm rose-red.
Best Practices
Consistency across components
Pick one shade per role and stick to it. If "primary button" is blue-500, it should be blue-500 everywhere — not blue-500 on the homepage and blue-600 on the product page.
Use the scale, do not invent values
The 50-900 scale exists for a reason. Reach for the next step (blue-600 for hover) instead of adding custom hex values.
Neutrals do most of the work
Most interfaces are 70-90% neutral. Pick slate or gray and use your brand color sparingly.
Test contrast
Not every combination in the palette passes WCAG. Blue-500 text on white passes AA. Blue-300 text on white does not. Test the combinations you actually use.
Dark mode requires different steps
The same "blue-500" looks different in dark mode. Use lighter steps (blue-400) for accents on dark backgrounds and darker steps (blue-900) for dark surfaces.
Common Mistakes
Using 500 for everything
500 is the base, not the only color. Use the full scale for hierarchy: backgrounds (50-100), borders (200), primary (500), hover (600), text (900).
Ignoring dark mode
Tailwind colors are optimized for light mode. In dark mode, swap text/background colors entirely — the "reverse" of light mode is not always right.
Combining too many families
Using blue, red, green, purple, and yellow all at once creates visual chaos. Pick 2-3 families and rely on neutrals.
Not customizing brand colors
Tailwind's defaults are great but generic. If you have a brand color, override the palette in tailwind.config.js — do not mix brand and default colors.