Tailwind Color Palette and How to Use It

Tailwind ships a rich default color palette covering slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, plus black and white. Each color except black and white comes in eleven shades: 50 (very light), 100, 200, 300, 400, 500 (mid), 600, 700, 800, 900, and 950 (very dark). This gives you 220+ named color values out of the box. Colors are applied through prefixed utilities: bg-* for backgrounds, text-* for text, border-* for borders, ring-* for focus rings, shadow-* for colored shadows, divide-* for divider lines, outline-* for outlines, decoration-* for text decorations, accent-* for form element accent colors, and caret-* for input caret colors. All these prefixes work with the same color names and shades, giving you a consistent API. Tailwind v3 introduced the opacity modifier syntax using a slash: bg-blue-500/50 sets the background to blue-500 at 50% opacity, text-gray-900/75 sets text opacity, and so on. This replaces the older bg-opacity-* utilities and works for all color properties. The modifier accepts any value from 0 to 100 as a percentage, or arbitrary values like bg-blue-500/[0.35].

Example

<!-- Background colors across the palette -->
<div class="grid grid-cols-3 gap-2 p-4">
  <div class="bg-blue-500 text-white p-3 rounded">blue-500</div>
  <div class="bg-emerald-500 text-white p-3 rounded">emerald-500</div>
  <div class="bg-rose-500 text-white p-3 rounded">rose-500</div>
  <div class="bg-amber-400 text-gray-900 p-3 rounded">amber-400</div>
  <div class="bg-violet-600 text-white p-3 rounded">violet-600</div>
  <div class="bg-sky-300 text-sky-900 p-3 rounded">sky-300</div>
</div>

<!-- Text colors -->
<p class="text-gray-900">Default body text</p>
<p class="text-gray-600">Secondary text</p>
<p class="text-gray-400">Muted / placeholder text</p>
<p class="text-blue-600">Link color</p>
<p class="text-emerald-600">Success message</p>
<p class="text-red-600">Error message</p>
<p class="text-amber-600">Warning message</p>

<!-- Border colors -->
<input class="border border-gray-300 focus:border-blue-500 rounded px-3 py-2" />
<div class="border-l-4 border-blue-500 pl-4 text-gray-700 italic">
  Callout with left border accent
</div>

<!-- Opacity modifier syntax (v3+) -->
<div class="bg-blue-600/20 text-blue-900 p-4 rounded-lg">
  Light blue tint background (20% opacity)
</div>
<div class="bg-black/50 backdrop-blur p-6 text-white rounded-xl">
  Glassmorphism overlay
</div>

<!-- Shade scale demonstration -->
<div class="flex gap-1">
  <div class="w-8 h-8 rounded bg-indigo-50"></div>
  <div class="w-8 h-8 rounded bg-indigo-200"></div>
  <div class="w-8 h-8 rounded bg-indigo-400"></div>
  <div class="w-8 h-8 rounded bg-indigo-600"></div>
  <div class="w-8 h-8 rounded bg-indigo-800"></div>
  <div class="w-8 h-8 rounded bg-indigo-950"></div>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned