Tailwind Color Cheatsheet
Browse every Tailwind CSS default color (slate → rose, 50 → 900) and copy any hex with one click.
Quick answer: Tailwind Color Cheatsheet: browse every Tailwind CSS default color (slate → rose, 50 → 900) and copy any hex with one click. Runs entirely in your browser, free, no signup.
Last updated
Good to know
Tailwind's default palette is deliberately perceptual: each named ramp runs from 50 (near-white) to 950 (near-black), and the numbers are tuned so that a step of 100 feels like roughly the same jump in lightness across every hue. That is why slate-200 and blue-200 read as the same weight even though the underlying hex values are unrelated — handy when you are building a UI that stays balanced as you swap accent colors.
A practical convention that saves a lot of back-and-forth: pick your text and background from opposite ends of the same or a neighboring ramp. Body text on slate-900 over a slate-50 card almost always clears WCAG AA, whereas mid-tones like 400 on 300 rarely do. When you are unsure, copy the two hex values here and drop them into our contrast checker before committing them to a design system.
The class label next to every swatch is the copy target you actually want: knowing a shade is emerald-500 lets you type the utility directly (bg-emerald-500, text-emerald-500) instead of pasting a raw hex and losing Tailwind's dark-mode and opacity modifiers. Reach for the hex only when you are working outside Tailwind — an email template, an SVG fill, or a native app style sheet.
One caveat: this is the stock v3/v4 default theme. If your project overrides theme.colors or uses the older v2 ramp (which stopped at 900), the names will match but the hex values may not. Treat the cheatsheet as the baseline, then verify against your own tailwind.config when a color looks off.
Frequently asked questions
- Is the cheatsheet free?
- Yes — free with no signup.
- Which Tailwind version are these from?
- Tailwind v3 default palette — the version still in active use everywhere.
- Can I copy more than the hex?
- The label includes the Tailwind class name (e.g. blue-500) so you know exactly which utility produces that color.
- Are these the same as v4?
- Tailwind v4 keeps the same palette by default. Custom theme overrides are not represented here.
- Is anything uploaded?
- No — every palette is built into the page.