Tailwind CSS Color Chart

The full Tailwind CSS palette

The Tailwind CSS color palette, in full

This chart lists every color in Tailwind CSS's default palette — 22 named scales (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose) plus the fixed black and white. Each scale runs across 11 numbered weights from 50 (near white) to 950 (near black), so the whole system is 22 × 11 = 242 usable Tailwind color classes. Click any swatch above to copy its hex code; hover to read the RGB value.

The numbered weights are the key idea. A utility class like bg-blue-500 maps to one exact hex code (#3B82F6), and text-blue-900 maps to another. Because the steps are tuned to keep contrast roughly consistent across every hue, 500 works as a mid-strength accent in any scale, 50–200 suit backgrounds and hover states, and 700–950 suit body text and headings. Knowing the hex code behind each class is useful the moment you step outside Tailwind — an email template, an SVG icon, a design tool, or a @theme block where you extend or override the defaults.

How to use the Tailwind color chart

If you are matching a design to Tailwind, paste a hex code into the color converter and compare it against the weights here to find the nearest class. If you are going the other way — you have a Tailwind class and need the raw value for a non-Tailwind context — copy the hex straight from this page. To build a custom scale that slots into the same 50–950 structure, feed your brand color into the palette generator, which produces an 11-step ramp you can drop into tailwind.config or a CSS @theme. Before shipping any text color, check the pairing in the contrast checker: Tailwind's 400 and 500 weights often fail WCAG AA on white for normal-size text, while 600 and darker usually pass.

Tailwind's palette is deliberately close to the Material Design and other modern UI systems, so the same weight-based thinking transfers. For the classic web reference set, see the 140 CSS color names, and for every chart on the site, the color charts hub.