Why you need a standalone Tailwind color reference
Tailwind CSS ships with 22 color families, each available in 11 shades from 50 to 950, totaling 242 colors. The official documentation shows them, but browsing contextually while writing code means constant tab-switching. The Tailwind Color Reference at /design-css/colors/tailwind-color-reference gives you the entire palette in a single, filterable view. Click any swatch to copy its HEX value. Export all 242 colors as CSS custom properties in one click. The data matches the Tailwind CSS v3 default palette exactly, sourced from the official configuration.
This tool is particularly useful when you are prototyping outside of Tailwind (in Figma, Photoshop, or a design system document) and need the exact HEX values. It is also handy when migrating a project from Tailwind utility classes to CSS custom properties, or when building a component library that needs color tokens independent of the framework.
The 22 color families
Slate: cool gray-blue tones, ideal for text and backgrounds in professional interfaces.
Gray: neutral grays for structural elements and disabled states.
Zinc, Neutral, Stone: warm-neutral alternatives to gray for softer palettes.
Red, Orange, Amber, Yellow: warm accent colors spanning danger to warmth to highlight.
Lime, Green, Emerald, Teal: green-family accents from energetic to sophisticated.
Cyan, Sky, Blue, Indigo, Violet, Purple: cool accents from airy to regal.
Fuchsia, Pink, Rose: warm-pink accents for CTAs, alerts, and decorative elements.
Each family has a distinct hue identity. The shade scale (50 to 950) controls lightness and saturation in a perceptually uniform progression, meaning each step feels like a similar visual distance from its neighbors.
The shade system: 50 through 950
Tailwind v3 introduced the 950 shade as a darker option beyond the previous 900 maximum. The full scale now runs from 50 (near-white with a tint of the hue) to 950 (near-black with a hint of the hue). The middle shades (400 to 600) are the most saturated versions of each color. The extremes (50 and 950) are where the color is most subdued.
| Shade Range | Typical Use |
|---|---|
| 50 to 100 | Light backgrounds, subtle tints, hover states on light surfaces |
| 200 to 300 | Borders, dividers, disabled elements, secondary text |
| 400 to 500 | Standard text, primary UI elements, icons |
| 600 to 700 | Buttons, links, active states, emphasized elements |
| 800 to 900 | Dark text on light backgrounds, dark-mode surfaces |
| 950 | Near-black backgrounds, high-contrast dark mode |
Filtering and one-click HEX copy
The filter box at the top lets you type a partial color name (like `blue` or `rose`) to jump directly to that family. This is faster than scrolling through all 22 families when you know what you need. Once you find the right swatch, click it to copy its HEX value to your clipboard. A brief confirmation appears so you know the copy succeeded.
This workflow is optimized for speed. Designers working in Figma can keep the reference open in a browser tab, filter to the color they need, copy the HEX, and paste it directly into the Figma color picker. Developers can copy the HEX to use in a `style` attribute or a non-Tailwind CSS context where the utility class is not available.
CSS variables export
The export button generates a complete set of CSS custom properties in the format `--slate-50: #f8fafc;` through `--rose-950: #4c0519;`. This produces 242 variable declarations wrapped in a `:root` block, ready to paste into your stylesheet. Once defined, you can reference any Tailwind color as `var(--blue-500)` in your CSS.
This is useful in several scenarios: migrating from Tailwind utility classes to a design-token-based approach, building a component library that should not depend on Tailwind at runtime, or creating a theme system where the same colors are shared between a React app and a native iOS app. The exported variables use kebab-case naming that matches Tailwind's convention exactly.
Are these the official Tailwind colors?
Yes. The 242 colors in this reference match the Tailwind CSS v3 default palette as defined in the official Tailwind configuration. If Tailwind updates the palette in a future version, this reference will be updated to match. The HEX values are not approximations or interpretations; they are the exact values that `bg-blue-500`, `text-red-600`, and every other color utility class resolve to.
For related color tools, see the /blog/color-palette-generator for creating custom palettes, the /blog/color-shade-generator for generating a full shade scale from a single color, the /blog/color-tint-generator for lighter variations, and the /blog/color-harmony-generator for complementary and analogous schemes.
Step-by-step: using the color reference
Browse all 22 color families displayed as horizontal shade strips.
Use the filter box to jump to a specific family by name.
Click any individual swatch to copy its HEX value to your clipboard.
Click the export button to download all 242 colors as CSS custom properties.
No account, no API key, no server interaction. The color data is embedded in the page and the copy operation uses the browser's native clipboard API. For more information, visit /about.
Frequently asked questions
Q: How many colors are included in the reference?
A: 22 families multiplied by 11 shades equals 242 colors total, matching the official Tailwind CSS v3 default palette.
Q: How is the CSS variables export formatted?
A: As a `:root` block with kebab-case variables like `--slate-50: #f8fafc;` through `--rose-950: #4c0519;`.
Q: Are these the official Tailwind CSS colors?
A: Yes. They match the Tailwind CSS v3 default palette exactly.
Q: Can I filter by color family?
A: Yes. Type a partial name like `blue` or `rose` in the filter box to jump to that family.
