Tailwind's Color Palette
Explore the full Tailwind color system with shades from 50 to 950, and apply background colors using bg-* utilities.
Overview of the Color Palette
Tailwind's default color palette contains 22 named color families, each with 11 shades numbered from 50 to 950. The families include neutrals (slate, gray, zinc, stone, neutral), warm tones (red, orange, amber, yellow), cool tones (lime, green, emerald, teal, cyan, sky, blue, indigo, violet), and vibrant accents (purple, fuchsia, pink, rose). Every shade is pre-approved for use in your design system.
<!-- Using different color families -->
<div class="bg-slate-100">Slate 100</div>
<div class="bg-blue-500">Blue 500</div>
<div class="bg-emerald-600">Emerald 600</div>
<div class="bg-rose-400">Rose 400</div>Understanding Shade Numbers
Shade numbers communicate lightness: 50 is nearly white (a faint tint), 100–300 are light pastels, 400–600 are vibrant mid-tones, 700–800 are dark and saturated, and 900–950 are nearly black. As a rule of thumb, use 50–200 for backgrounds, 400–600 for icons and accents, and 700–900 for text to guarantee readable contrast on white.
<div class="bg-blue-50 p-4">Shade 50 — near-white background</div>
<div class="bg-blue-200 p-4">Shade 200 — light accent</div>
<div class="bg-blue-500 p-4 text-white">Shade 500 — vivid button color</div>
<div class="bg-blue-700 p-4 text-white">Shade 700 — dark hover state</div>
<div class="bg-blue-950 p-4 text-white">Shade 950 — deep background</div>All lessons in this course
- Tailwind's Color Palette
- Background Gradients
- Opacity and Color Modifiers
- Background Size, Position, and Repeat