Browse the complete Tailwind CSS color palette. All 22 color families with 11 shades each. Click any swatch to copy the Tailwind class name or hex value. Updated for Tailwind v3 and v4.
Browse all 22 Tailwind color families displayed as swatches.
Click any color swatch to copy its Tailwind class name.
Toggle between copy modes: class name (e.g., blue-500) or hex value (#3b82f6).
Use the search box to find a specific color family quickly.
Click "View shades" to expand a color family and see all 11 shades.
Tailwind v3 includes 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), each with 11 shades from 50 to 950.
Tailwind v4 defines colors using OKLCH color space custom properties for more perceptual uniformity across screens. The class names remain the same but the underlying values are more accurate.
In tailwind.config.js, extend the colors in theme.extend.colors. You can add arbitrary named colors with any shades you define.
Tailwind CSS includes one of the most thoughtfully designed color palettes in any CSS framework. Unlike Bootstrap's handful of semantic colors, Tailwind gives you a full, mathematically balanced palette of 22 color families, each with 11 carefully chosen shades.
Tailwind organizes its colors into these families:
| Family | Notes |
|---|---|
slate | Blue-gray, popular for neutral backgrounds |
gray | Pure neutral gray |
zinc | Gray with a hint of warm metal |
neutral | Perfectly neutral gray |
stone | Warm gray with sandy undertones |
red | Vibrant, strong red |
orange | Warm orange |
amber | Golden amber yellow |
yellow | Bright, saturated yellow |
lime | Yellow-green |
green | Balanced green |
emerald | Rich emerald green |
teal | Blue-green |
cyan | Bright cyan |
sky | Light, airy blue |
blue | Classic blue |
indigo | Deep indigo-blue |
violet | Purple-blue |
purple | Pure purple |
fuchsia | Pink-purple |
pink | Bright pink |
rose | Red-pink |
Each color family has 11 shades:
| Shade | Usage |
|---|---|
50 | Nearly white — backgrounds, hover states |
100 | Very light — section backgrounds |
200 | Light — borders, dividers |
300 | Soft — disabled states, placeholder text |
400 | Medium-light — icons, secondary text |
500 | Mid-tone — default brand color |
600 | Slightly dark — hover variants |
700 | Dark — active/pressed states |
800 | Very dark — headings on light backgrounds |
900 | Near black — primary text on white |
950 | Darkest — dark mode backgrounds |
Text color: text-blue-500
Background: bg-blue-500
Border: border-blue-500
Ring (focus): ring-blue-500
Divide: divide-blue-500
Gradient: from-blue-500 to-purple-600
With opacity modifier (Tailwind v3+):
<div class="bg-blue-500/20"> <!-- 20% opacity -->
<div class="text-gray-900/80"> <!-- 80% opacity -->
Tailwind CSS v4 (2025) introduced a new approach — colors are defined as CSS custom properties using OKLCH color space, making them even more perceptually uniform and allowing easier custom overrides in CSS:
/* v4 style */
--color-blue-500: oklch(62.3% 0.214 259.1);
The class names remain the same, but the underlying values are mo...
Looking for a more detailed deep-dive and advanced tips?
Read Full Article on our BlogYour data never leaves this device. All processing is handled locally by JavaScript.
We are currently building this tool. Check back shortly!