Colors
Explore Tailwind's default color palette and shade scale, and learn the text-*, bg-*, and border-* utility classes used to apply color to any element.
Introduction
Color is one of the areas where Tailwind's design-system-first approach pays off the most. Instead of picking arbitrary hex codes for every element, Tailwind gives you a large, carefully curated palette with a consistent shade scale, applied through simple text-*, bg-*, and border-* utility classes. This lesson covers the palette structure and all three color utility families.
The Default Color Palette
Tailwind ships with over twenty base color families out of the box — grays (slate, gray, zinc, neutral, stone), and a full spectrum of hues (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), plus black and white. Every color family follows the same naming pattern and shade structure, so once you learn one, you know them all.
⚫ Neutral Families
slate, gray, zinc, neutral, and stone — five subtly different grays for text and backgrounds.
Full Spectrum
Reds, oranges, yellows, greens, blues, purples, and pinks, each with the same consistent shade range.
🎚️ Consistent Scale
Every color family uses the same 50–950 shade numbering, so patterns learned once apply everywhere.
Configurable
The entire palette can be extended or replaced via theme.extend.colors in tailwind.config.js.
The Shade Scale
Each color family is broken into numbered shades from 50 (lightest) to 950 (darkest), in the pattern {color}-{shade}, for example blue-500 or red-900. The number 500 is generally the 'base' or most saturated version of that color, with lower numbers getting progressively lighter and higher numbers getting progressively darker.
| Shade | Typical Use |
|---|---|
| 50 – 100 | Very light backgrounds (e.g. a subtle info banner) |
| 200 – 300 | Light borders, hover backgrounds |
| 400 – 500 | Base/default color, often used for icons or accents |
| 600 – 700 | Buttons, links, primary interactive elements |
| 800 – 950 | Dark text on light backgrounds, or dark-mode surfaces |
<div class="flex gap-2"> <div class="w-10 h-10 bg-blue-200"></div> <div class="w-10 h-10 bg-blue-400"></div> <div class="w-10 h-10 bg-blue-600"></div> <div class="w-10 h-10 bg-blue-800"></div></div>Click Run to see what this code prints.
Text Color Utilities
Text color utilities follow the pattern text-{color}-{shade} and set the CSS color property.
<p class="text-gray-500">Muted secondary text</p><p class="text-red-600">An error message</p><p class="text-green-600">A success message</p>Click Run to see what this code prints.
Background Color Utilities
Background color utilities follow the pattern bg-{color}-{shade} and set the CSS background-color property. These are extremely common for buttons, cards, badges, and section backgrounds.
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm font-medium"> Pending</span>Click Run to see what this code prints.
Border Color Utilities
Border color utilities follow the pattern border-{color}-{shade}, but only take effect alongside a border-width utility (like border or border-2) that actually enables a visible border in the first place.
<div class="border-2 border-indigo-500 rounded-md p-4"> This box has a visible indigo border.</div>Click Run to see what this code prints.
Common Mistakes
- Applying a border-{color} class without also including a border-width utility like border — no border renders without a width.
- Assuming every shade number exists for every color the same way across all versions — always check current documentation if unsure.
- Using very light text on very light backgrounds (e.g. text-gray-200 on bg-white), producing poor contrast and accessibility issues.
- Hardcoding arbitrary hex colors with bracket syntax instead of using the built-in palette when a close match already exists.
Best Practices
- Reach for shades in the 600-700 range for primary interactive elements like buttons and links — they typically offer strong contrast against white.
- Use lighter shades (50-100) for background fills and darker shades (700-900) for text on top of them, to maintain good contrast.
- Define a small set of semantic custom colors (like brand or danger) in tailwind.config.js if your project needs consistent branding beyond the defaults.
- Check text/background color combinations against accessibility contrast guidelines, especially for body text.
Frequently Asked Questions
Most color families in Tailwind's default palette span from 50 to 950 in fixed steps (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) — eleven shades per color family.
Yes. Add them under theme.extend.colors in tailwind.config.js, either as a single value or as a full shade scale object, and matching text-*, bg-*, and border-* classes are generated automatically.
They're all neutral gray families with slightly different color temperatures — slate and zinc lean cooler/bluer, while stone leans warmer. gray and neutral sit in between. Which one to use is purely a design preference.
Yes. A border-{color} utility only sets the color; you also need a width utility like border (1px) or border-2 (2px) for any border to actually be visible.
Key Takeaways
- Tailwind ships a large default palette of color families, each following the same {color}-{shade} naming pattern.
- Shades range from 50 (lightest) to 950 (darkest), with 500 typically the base/most saturated version.
- text-*, bg-*, and border-* utilities apply color to text, backgrounds, and borders respectively.
- Border color utilities require a paired border-width utility (like border) to actually render a visible border.
Summary
You now understand Tailwind's color palette, its shade scale, and the three main color utility families. Next, you'll learn Tailwind's spacing system — the margin and padding utilities that control layout breathing room throughout a page.