Tailwind CSS Colors

The Tailwind color scale

Tailwind ships a palette of named hues (slate, red, amber, emerald, and so on), each with a numbered scale from 50 to 950. The number is a lightness step: 50 is nearly white, 500 sits in the middle, and 950 is almost black. Picking shades by number instead of eyeballing hex values keeps contrast relationships predictable across a design.

How the steps are meant to pair

A reliable pattern is text at 700 to 900 on a background at 50 to 100 of the same hue, which keeps a family feel while staying readable. The 500 step is the brand anchor most people reach for, but it is often too light for body text on white. Checking the pair in a contrast checker before shipping saves a redesign later.

Example

/* the raw values behind two common classes */
.bg-blue-500 { background-color: #3b82f6; }
.text-blue-900 { color: #1e3a8a; }

/* use the hex directly outside Tailwind */
button { background: #3b82f6; }

Copying the hex lets you reuse the palette in plain CSS, a canvas drawing, or a design file where Tailwind classes do not apply.

Pitfalls

The scale is perceptual, not linear, so 400 is not exactly halfway between 300 and 500 in any single channel. Gray and the true-neutral hues differ: slate, gray, zinc, neutral, and stone carry subtly different temperature tints, so mixing them in one UI can look muddy. Convert any value with the color converter if you need HSL to build custom intermediate shades.

FAQ

Which step is accessible on white? As a rule of thumb 600 or darker clears the 4.5:1 text threshold for most hues, but verify, since yellows and limes stay light even at 600.

Can I add my own shade? Yes, extend the theme with a custom hue and the same 50-950 keys so utilities generate consistently.

Why do my colors look different in dark mode? Flip the scale: a 100 background becomes an 900 one, and text moves from 900 toward 100.