Tailwind CSS Color Palette
Browse and copy the complete Tailwind CSS color palette for free — 22 families × 11 shades, with HEX, RGB and class-name copy. Runs in your browser.
100% private — runs entirely in your browser. Your files never leave your device.
The complete default Tailwind CSS v3 color palette — 22 families × 11 shades. Switch the
copy format between HEX, RGB and Tailwind class names (e.g. bg-blue-500). Runs in your browser.
How to use the Tailwind CSS Color Palette
- Browse the full Tailwind palette by family and shade.
- Switch the format to HEX, RGB or class name.
- Click any swatch to copy its value.
What you can use it for
- Look up exact Tailwind color values
- Copy bg-/text- class names straight into markup
- Pick shades for a consistent UI
- Reference the palette without opening the docs
More free tools
Working on a color scheme?
Pick, convert, mix and check colors with our full set of free, no-signup color tools.
Explore all free color tools →Frequently asked questions
Which Tailwind version is this?
The default Tailwind CSS v3 palette — 22 color families (slate through rose) each with shades from 50 to 950.
Can I copy the class name?
Yes — switch the format to 'Class' to copy tokens like bg-blue-500, or use HEX and RGB for any project.
Are these the exact official values?
Yes — the hex values are taken directly from Tailwind's own color definitions.
Is anything uploaded?
No — it's a static reference that runs entirely in your browser.