Which Tailwind version is this palette from?

These are the default colors shipped with Tailwind CSS v3, which kept the v2 extended palette. That includes the full 50–950 ramp for each hue (slate, gray, zinc, neutral, stone, red through rose), plus black and white.

Why does my project show a different hex for the same name?

Your tailwind.config.js may override or extend the theme colors, or you may be on an older version. This tool reflects the stock default palette; a customized config can map blue-500 to anything.

What do the numeric shades mean?

The number is the shade step. 50 is the lightest tint and 950 is the darkest. 500 is the nominal base of each hue. Lower numbers are lighter, higher numbers are darker.

Are these the same as plain CSS color names?

No. Tailwind's palette is its own curated set tuned for UI work and does not match the 147 named CSS colors. For example, Tailwind blue-500 is #3b82f6, while CSS blue is #0000ff.

Can I get the RGB values too?

Yes. Every row shows the RGB triplet next to the hex code, so you can paste either format into your stylesheet or design tool.

Tailwind Color Name to Hex

Tailwind CSS ships a carefully tuned default color palette, but remembering that blue-500 is #3b82f6 is another matter. This reference lets you search the full default palette by name and copy the exact hex or RGB value.

How it works

Tailwind organizes color into named hues, each with a ramp of shades from 50 (lightest) through 950 (darkest), with 500 as the base. The token format is hue-shade, for example emerald-400 or zinc-700. There are also the singleton colors black, white, and the fully transparent transparent.

This tool holds the stock v3 palette in a local lookup table. As you type, it filters the table by token name and renders each match with its hex code, RGB triplet, and a live swatch.

Notes

If your project defines a custom tailwind.config.js, the values there take precedence over these defaults, so a token may resolve to a different color in your build. The Tailwind palette is distinct from the named CSS colors: blue-500 is a soft, UI-friendly blue, not the pure #0000ff of CSS blue. Use the copy buttons to grab either the hex or, by reading the row, the RGB form.