Tailwind Color Reference

The Tailwind color palette reference lists all eighteen Tailwind color families from slate to rose, each shown as an eleven-step ramp from 50 to 950 with every hex value printed.

What is Tailwind Color Reference?

• The page is organised as one block per family.
• Eighteen families are covered — slate, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose — and each block holds eleven tiles labelled 50 to 950, with the hex value printed beneath every swatch.
• On a wide screen a family fits across a single row, so the shape of the ramp is visible at a glance.

The base value of each family is Tailwind's own published colour — the slate at #64748b, the red at #ef4444, the blue at #3b82f6, and so on — and that is the anchor of the reference. Each base is the value the framework ships as the five hundred step, which is what makes this list useful as a lookup: find the family by name and the anchor colour is the one you already know.

The eleven numbered steps are generated here rather than copied from the framework's own scale. Each step is computed at a fixed lightness — 0.97 for the fifty, then 0.93, 0.85, 0.75, 0.65, 0.55, 0.47, 0.40, 0.32, 0.22 and 0.14 for the nine-fifty — while the family's hue and chroma are held constant. The result is a ramp with the right shape and the right hue, and individual steps that will not always match the exact values in a Tailwind install.

That distinction matters when the numbers are going into a project. Use the base hex, the step label or the family name with confidence, since those come straight from the framework. Use the generated step hexes as a preview of the ramp and a starting point, and take the exact values from the installed package when a pixel-exact match is required.

As a tailwind color palette reference it is the fastest way to see the framework's families side by side, which is not something a documentation page does well: eighteen ramps stacked in one scroll shows how much of the system sits in the warm end, how the neutrals compare to the saturated families, and where the pale steps land relative to white. The tailwind color names are all here, and the order they appear in — slate through rose — follows the wheel closely enough to compare neighbours.

Why a reference page rather than the documentation itself is mostly a question of shape. Eighteen ramps stacked in one scroll can be compared against each other, which a per-colour documentation page cannot manage: it is easy to see here that the green and the emerald families are close enough to be alternatives, that the two darkest steps of the blues converge, and how far the yellow and lime ramps sit from white at their pale ends. For anyone assembling a set from the framework's own tailwind color families rather than from a brand colour, that comparison is the useful part of the page, and it is the reason a plain list of values is still worth keeping around.

Limits: no search box, no copy buttons, no alpha or dark-mode variants, and no way to filter the list down to a few families.

• The eleven steps are the only scale shown, so the framework's own bespoke values for specific components are not included.
• Within those bounds, the tailwind colors list with every tailwind shades hex value printed is a complete, honest reference to the system's colour families.

How to use Tailwind Color Reference

1. Find the family you need by scrolling to its block — they run slate to rose.
2. Read the eleven steps from 50 at the lightest to 950 at the darkest.
3. Take the hex printed under the step you want, which the tiles label as a Tailwind scale number.

When to use Tailwind Color Reference vs related tools

Use this when a Tailwind project needs the framework's own colour values, or when you want to see the whole system at once while choosing a family. Use the Tailwind colour exporter when the output has to be a config block for a brand colour instead of the framework's own palette. A ramp derived from your own brand colour is what the Tailwind palette generator builds, and that ramp leaving as a config block is the Tailwind CSS color exporter's job.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Tailwind Color Reference