Tailwind Color Scales Explained: How to Read 50–950 Hex Codes

In Tailwind, a color is never just one value. Ask for blue and you get eleven codes, from blue-50 to blue-950, all the same hue at different lightness levels. That numbering is the whole system: once you can read a scale, you can pick a shade on purpose instead of guessing — and you can build the same ramp for a brand color that is not in the default palette.

What the numbers mean

The scale runs in eleven steps, and every default color uses the same set:

50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

• 50 is the lightest — a tint barely different from white, made for page and section backgrounds.
• 500 is the base — the "true" version of the color, the one most people picture.
• 950 is the darkest — nearly black, used for dark-mode surfaces and deep accents.

Here is the actual blue ramp, with the hex and RGB values side by side:

Each step is a deliberate lightness move, and the hue stays put — the whole point of a scale is that blue-300 and blue-700 still look like the same color.

Reading a ramp like a designer

The steps map to UI roles almost mechanically:

• 50–100 — page backgrounds, table stripes, subtle hover states.
• 200–300 — borders, dividers, disabled states, chips.
• 400–500 — icons, illustrations, focus rings, accents.
• 500–600 — solid buttons, links, badges, the primary brand surface.
• 700–800 — headings and body text on light backgrounds.

• 900–950 — dark sections, dark-mode backgrounds, hero overlays.

Tailwind classes make that easy to apply: bg-blue-600 text-white for a button, border-blue-200 for its outline, text-blue-700 for a heading, bg-blue-50 for the section behind it. Opacity modifiers like bg-blue-600/10 let one shade do the work of two.

The trap is assuming 500 is always right. For text on white, blue-500 at #3B82F6 gives roughly 3.7:1 contrast — fine for large text and UI shapes, short of the 4.5:1 that small body text needs. blue-600 reaches about 5.2:1 and passes AA. When a client says "the blue looks washed out", the fix is usually a step or two darker, not a new hue.

Building a scale for your own color

The default palette covers more than twenty color families, but a brand color rarely matches one exactly. To build a matching ramp, keep two rules:

1. Hold the hue. Shift lightness between steps, and only drift the hue slightly (a touch warmer in highlights, cooler in shadows) so the ramp still feels like one color.
2. Use consistent lightness targets. Aim for even perceptual steps rather than halving the distance between neighbors.

One base color is enough to start:

// tailwind.config.js — a partial brand ramp around #7c3aed
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f5f3ff',
          100: '#ede9fe',
          200: '#ddd6fe',
          500: '#8b5cf6',
          600: '#7c3aed',
          700: '#6d28d9',
          900: '#4c1d95',
          950: '#2e1065',
        },
      },
    },
  },
};

Add the remaining steps and bg-brand-600, border-brand-200 and text-brand-700 work exactly like the built-in colors. The Tailwind color generator does the heavy lifting: give it one hex code and it returns a full 50–950 block you can paste straight into your config, with the lightness steps already spaced evenly.

Tailwind vs Material vs web-safe

The numbered-ramp idea is not unique to Tailwind, but the details differ:

The 950 step arrived in Tailwind CSS v3.3, before which ramps stopped at 900. And in Tailwind CSS v4 the default palette is defined in OKLCH, which can render slightly more vivid values on wide-gamut displays — so the sRGB hex codes above are the classic v3 ramp you will still meet in design files and Figma libraries.

Copying values out of a scale

Scales are great for a design system and awkward when you need one exact code. All eleven shades of every Tailwind family are charted in the color charts with copyable hex values, and you can pull a single ramp into RGB or HSL with the Hex to RGB converter.

Try it: open the Tailwind section of the color charts, copy blue-500 and blue-600, then paste both into the contrast checker against white. Seeing 3.7:1 versus 5.2:1 on the same hue is the quickest way to understand why the numbered steps exist.

A scale turns color into a system: identical hues, predictable lightness, and a shared vocabulary for designers and developers. Number your own colors the same way and your theme will stay consistent long after the first screen is built.