Tailwind CSS Color Palette Reference (2026)
By Rui Barreira · Last updated: 18 June 2026
Tailwind CSS ships with a carefully tuned color palette spanning 22 named hues, each divided into 11 numeric steps from 50 to 950. Knowing how that palette is structured — and which steps to reach for at which layer of your UI — saves significant trial and error when building consistent interfaces.
How the numeric scale works
Every color family in Tailwind follows the same 11-step convention: 50, 100, 200 … 900, 950. Lower numbers are lighter; higher numbers are darker. The midpoint, 500, is roughly the pure hue at full saturation and is typically what you would call the "brand" shade. The scale is perceptually balanced, not mathematically linear, so adjacent steps look evenly spaced to the human eye.
Tailwind encodes these as CSS custom properties in v4 (--color-blue-500) and as utility classes in both v3 and v4 (bg-blue-500, text-blue-500, etc.). The values are HSL-derived but shipped as RGB hex strings for backwards compatibility.
Step reference: what each range is for
| Step range | Approximate lightness | Typical use |
|---|---|---|
| 50 | 95–97% | Page backgrounds, subtle tinted surfaces |
| 100–200 | 85–93% | Badge fills, hover backgrounds, chip backgrounds |
| 300–400 | 65–80% | Borders, placeholder text, disabled controls |
| 500 | 45–55% | Primary buttons, brand color, icons on light backgrounds |
| 600–700 | 30–44% | Hover and active states on primary, section headings |
| 800–900 | 15–29% | Body text, dark card surfaces, sidebar backgrounds |
| 950 | 8–14% | Near-black text, high-contrast dark mode backgrounds |
Building a semantic layer on top of the palette
Referencing raw steps like bg-sky-600 in every component couples your UI tightly to a single hue. A more maintainable pattern is to define semantic aliases in your tailwind.config.js (v3) or CSS layer (v4) that map to palette steps:
/* Tailwind v4 — globals.css */
@theme {
--color-brand: var(--color-sky-500);
--color-brand-hover: var(--color-sky-600);
--color-surface: var(--color-slate-50);
--color-surface-raised: var(--color-white);
--color-text-primary: var(--color-slate-900);
--color-text-muted: var(--color-slate-500);
--color-border: var(--color-slate-200);
}Components then use bg-brand, text-text-primary, and border-border. Swapping your brand hue or supporting dark mode becomes a one-line change in the theme layer rather than a find-and-replace across every component.
Accessibility: contrast at a glance
WCAG 2.1 AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. As a rough rule, pairing -700 or darker text on a white background passes AA for normal text, and -500 on white typically passes for large text only. Always verify with a contrast checker — the safe pairing is not the same across every hue because saturation and hue itself affect perceived luminance.
Use the Tailwind Color Reference to browse every palette step side by side, copy hex values, and check which utility class maps to which shade without leaving your browser.
Frequently Asked Questions
- Is this tool free?
- Yes — completely free, no signup required. All processing happens in your browser.
- Does the tool work offline?
- Once loaded, most features work without an internet connection since everything runs client-side.