Tailwind Color Reference
Browse the default Tailwind CSS color palette and copy any value with one click. Switch between copying the hex code or the utility class name. Everything runs in your browser.
About the Tailwind Color Reference
The Tailwind Color Reference shows the default Tailwind CSS color palette as a browsable grid. It covers 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), each with 11 shades from 50 to 950. Click any swatch to copy its hex value or its utility class name. It is built for developers and designers who want the exact value of a Tailwind color without opening the docs. Everything runs in your browser.
How it works
- Scan the grid by color family, or type in the filter box to narrow it (by family name, shade number, or hex code).
- Pick what to copy with the Hex / Class toggle. For class mode, choose the prefix (bg, text, border, ring, or fill).
- Click a swatch. The value is copied to your clipboard and a short Copied confirmation appears.
Features
- All 22 default Tailwind families with shades 50 to 950.
- Filter by family, shade, or hex to find a color fast.
- Toggle between copying the hex code or the Tailwind class name.
- Prefix selector for class mode (bg, text, border, ring, fill).
- One click to copy, with a confirmation each time.
Frequently asked questions
Which Tailwind version is this palette from?
These are the default colors shipped with Tailwind CSS v3, including the extended families (slate, zinc, neutral, stone) and the 950 shade. The hex values match the official defaults.
What does the Class toggle copy?
It copies a utility class built from the prefix you select and the color you click. For example, with the bg prefix, clicking blue-500 copies bg-blue-500. Switch the prefix to text, border, ring, or fill for other utilities.
Can I copy the hex value instead of the class?
Yes. Set the toggle to Hex and clicking a swatch copies its hex code, for example #3b82f6.
Is any data sent to a server?
No. The palette is embedded in the page and the copy action uses your browser clipboard. Nothing is uploaded or logged.
Why don't I see black, white, or transparent?
This grid lists the numbered color families with shades 50 to 950. The single-value keywords black, white, and transparent are not part of that grid. You can type their hex (#000000 or #ffffff) into any project directly.