Tailwind CSS Color Palette Reference

2 min read by Mohammad Shoeb

Tailwind CSS Color Palette Reference

Tailwind CSS colors are a fixed palette of named hues, each split into a numbered shade scale from 50 to 950. A class like bg-blue-500 maps to a single hex value, and once you know the pattern you can read any class without guessing. Here is how the system works and how to grab the underlying hex or RGB.

How Tailwind CSS color classes work

Every color utility follows the same pattern: prefix-hue-shade.

  • prefix is the property the color applies to. bg- sets the background, text- sets the font color, border- sets the border color. The same hue and shade work with all of them.
  • hue is the named color: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.
  • shade is a number on the scale.

So text-red-700 is dark red text, border-gray-200 is a pale gray border, and bg-emerald-500 is a mid emerald background. The hue and shade are shared, only the prefix changes what the color paints.

The 50 to 950 shade scale

Each hue runs through eleven shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The scale goes from very light at 50 to very dark at 950. The 500 shade is the base tone, the most saturated middle of the hue that the others are built around.

A practical rule of thumb:

  • 50 to 200: backgrounds, subtle fills, hover states on light surfaces.
  • 300 to 500: borders, icons, and the core brand color.
  • 600 to 950: text, dark UI, and high-contrast accents.

Because the steps are consistent across hues, swapping blue for indigo at the same shade keeps your contrast roughly intact.

Get the hex or RGB behind a class

When you need the actual value, for a Figma fill, a non-Tailwind project, or a quick gradient, look it up directly.

  1. Open the Tailwind Color Reference.
  2. Find the hue you want in the grid, such as sky or violet.
  3. Click the shade you need to copy its hex value.
  4. Switch to RGB or HSL if your design tool expects that format.
  5. Paste it wherever you need the raw color.

The Tailwind Color Reference runs entirely in your browser, so nothing you copy leaves your device.

Arbitrary values when the palette is not enough

If your brand color is not in the default palette, Tailwind supports arbitrary values with square brackets: bg-[#1da1f2] or text-[rgb(29,161,242)]. This drops a one-off color straight into the class without touching your config. Use it sparingly, since named shades keep a project consistent, but it is the fast path for a single custom tone.

Know the prefix-hue-shade pattern, remember 500 is the base, and any Tailwind class becomes a color you can read at a glance.

DesignCSSReference

← All posts