🎨 Tailwind CSS Color Reference
By ToolNimba Design Team · Updated 2026-06-19
Click any swatch to copy its value. Use the search box to filter by color name or hex.
The default Tailwind CSS palette gives you 22 named colors, each with 11 evenly spaced shades from 50 (very light) to 950 (very dark). This reference shows every swatch with its hex code, so you can match a utility class like bg-blue-500 to an exact color, or find the hex value behind text-slate-700. Use the search box to filter by color name (try "indigo"), by full class (try "rose-600") or by a hex value, then click any swatch to copy its hex or RGB to the clipboard.
What is the Tailwind Color Reference?
Tailwind CSS ships with a carefully tuned default color palette so you do not have to invent your own. Each color is a family: a hue name (slate, red, blue, emerald, and so on) paired with a numeric shade. The shades run 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Lower numbers are lighter and higher numbers are darker, with 500 sitting roughly in the middle as the most saturated, recognizable version of that hue. In your markup you reference them through utility classes such as bg-red-500, text-slate-800 or border-gray-200.
The numbering is deliberately consistent across every color, which is what makes the system so usable. A 100 shade of any color is a soft background tint, a 500 is a solid mid-tone good for buttons and accents, and a 700 to 900 range gives you readable text and dark surfaces. Because the steps are perceptually even, you can swap one hue for another (say, blue-600 for indigo-600) and keep the same visual weight, which is handy for theming and dark mode.
This page lists the literal hex values behind those classes. That matters when you step outside Tailwind: setting a color in an SVG, an email template, a chart library, a design tool like Figma, or an inline style all need the raw hex or RGB. Rather than digging through the framework source or guessing, you can search here, confirm the exact value, and copy it. The values shown are the standard defaults; if your project extends or overrides the theme in tailwind.config, your custom colors will differ from these.
When to use it
- Looking up the exact hex behind a utility class like bg-blue-600 to reuse it in an SVG, email or chart.
- Choosing a consistent shade across several hues, for example a 500 accent and a 700 text color.
- Recreating a Tailwind-based design in Figma, Sketch or another tool that needs raw hex or RGB values.
- Teaching or documenting a design system by referencing the standard shade scale from 50 to 950.
- Quickly grabbing a color for a one-off inline style without opening the framework source files.
How to use the Tailwind Color Reference
- Scan the grid: each row is a named color, each swatch a shade from 50 to 950.
- Type in the search box to filter by color name (e.g. "teal"), full class (e.g. "teal-400") or hex (e.g. "#2dd4bf").
- Switch the format selector between HEX and RGB depending on what you need to paste.
- Click any swatch to copy its value to the clipboard, the status line confirms the copy.
Formula & method
Worked examples
You see bg-indigo-600 in a template and need the hex for a Figma fill.
- Type "indigo-600" into the search box to filter to that single swatch.
- Read the swatch: indigo-600 = #4f46e5.
- Leave the format on HEX and click the swatch to copy #4f46e5.
- Paste it as the fill color in your design tool.
Result: indigo-600 = #4f46e5 = rgb(79, 70, 229).
You want a soft red background tint and a matching darker red for text.
- Search "red" to show the full red row from 50 to 950.
- Pick red-50 = #fef2f2 as the background tint.
- Pick red-700 = #b91c1c for readable text on that tint.
- Switch format to RGB if your CSS needs rgb() and copy each value.
Result: Background red-50 #fef2f2 with text red-700 #b91c1c gives a soft, readable pairing.
What each shade step is typically used for
| Shade | Lightness | Common use |
|---|---|---|
| 50 | Very light | Page or section background tints |
| 100 to 200 | Light | Hover backgrounds, subtle borders, badges |
| 300 to 400 | Mid-light | Disabled states, dividers, secondary icons |
| 500 | Mid (most saturated) | Primary buttons and accents |
| 600 to 700 | Mid-dark | Button hover, links, body text on light backgrounds |
| 800 to 950 | Dark | Headings, dark surfaces, dark-mode backgrounds |
The 500 shade hex for each Tailwind color family
| Color | Class | Hex |
|---|---|---|
| Slate | slate-500 | #64748b |
| Gray | gray-500 | #6b7280 |
| Red | red-500 | #ef4444 |
| Orange | orange-500 | #f97316 |
| Amber | amber-500 | #f59e0b |
| Yellow | yellow-500 | #eab308 |
| Green | green-500 | #22c55e |
| Emerald | emerald-500 | #10b981 |
| Teal | teal-500 | #14b8a6 |
| Sky | sky-500 | #0ea5e9 |
| Blue | blue-500 | #3b82f6 |
| Indigo | indigo-500 | #6366f1 |
| Violet | violet-500 | #8b5cf6 |
| Purple | purple-500 | #a855f7 |
| Pink | pink-500 | #ec4899 |
| Rose | rose-500 | #f43f5e |
Common mistakes to avoid
- Assuming these values when the theme is customized. If your project sets colors in tailwind.config (or the CSS theme in v4), your palette may differ. This page shows the framework defaults, always confirm against your own config when a value looks off.
- Treating 500 as the lightest or darkest. 500 is the middle, most saturated shade, not an extreme. The scale runs 50 (lightest) to 950 (darkest), so reach for 50 to 200 for tints and 800 to 950 for dark surfaces.
- Using a low-contrast text and background pair. Putting 400 text on a 200 background often fails accessibility contrast. Pair light backgrounds (50 to 200) with dark text (700 to 900) and check the contrast ratio for body copy.
- Mixing gray families inconsistently. Tailwind has several neutral families (slate, gray, zinc, neutral, stone) with slightly different undertones. Pick one for a project and stick to it, mixing them can look subtly off.
Glossary
- Hue family
- A named Tailwind color such as blue or emerald, each containing 11 shades.
- Shade
- The numeric step (50 to 950) within a color family, where lower is lighter and higher is darker.
- Utility class
- A Tailwind class like bg-blue-500 or text-slate-700 that applies one color to one property.
- Hex code
- A six-digit color value like #3b82f6, where pairs of digits encode red, green and blue.
- RGB
- A color expressed as red, green and blue channels from 0 to 255, e.g. rgb(59, 130, 246).
Frequently asked questions
What colors are in the default Tailwind CSS palette?
The default palette has 22 named colors: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose. Each comes in 11 shades from 50 to 950.
What do the numbers like 500 and 700 mean?
They are shade steps within a color family. 50 is the lightest, 950 is the darkest, and 500 is the middle, most saturated tone. Higher numbers mean a darker color, so blue-700 is darker than blue-400.
How do I get the hex code for a Tailwind class?
Search this page for the class (for example "blue-500") or the color name, then read the hex on the swatch. Click the swatch to copy the value, or switch the format selector to RGB if you need rgb() instead.
Are these the same colors as in my Tailwind project?
They match the framework defaults. If your tailwind.config or v4 CSS theme extends or overrides colors, your project values can differ. Use this as a reference for the standard palette and confirm custom colors in your config.
Why are there five gray families?
Slate, gray, zinc, neutral and stone are all neutral grays with slightly different undertones: slate is cool and blue-tinted, stone is warm, neutral is truly neutral. Pick one that suits your design and use it consistently.
Does this tool work offline and is my data private?
Yes. The whole palette is built into the page and runs entirely in your browser with vanilla JavaScript. Nothing is sent to a server, and copying uses your browser clipboard directly.