About the Tailwind colour palette
This is a quick reference for the Tailwind CSS v3 default colour palette — every hue (slate through rose) across all shades from 50 to 950, with the exact HEX value of each. Click any swatch to copy its hex code or the matching Tailwind class. It runs entirely in your browser.
How Tailwind Colors works
How to use it
- Browse the palette by hue and shade.
- Choose whether to copy the HEX value or the Tailwind class.
- Click any swatch to copy it.
Understanding the scale
Each hue runs from 50 (lightest) to 950 (darkest), with 500 as the base. Lower numbers suit backgrounds and tints; higher numbers suit text and accents.
Hex or class
Copy the raw hex for any design tool, or copy the bg-{hue}-{shade} class to drop straight into Tailwind markup (swap bg- for text- or border- as needed).
Common uses
- Look up a Tailwind colour hex
- Copy a Tailwind colour class
- Pick a shade for a UI element
- Match a design to Tailwind colours
- Reference the full palette quickly
- Find light and dark shades of a hue
- Build a consistent colour scheme
- Grab values for non-Tailwind projects
Frequently asked questions
What palette is this?
The Tailwind CSS v3 default colour palette, with every hue and shade.
How do I copy a colour?
Click a swatch — choose HEX or the Tailwind class with the dropdown first.
What does the shade number mean?
50 is lightest and 950 is darkest, with 500 as the base shade.
Can I copy the class name?
Yes — switch to class mode to copy bg-{hue}-{shade}.
Are the hex values exact?
Yes — they are the official Tailwind v3 values.
Can I use these outside Tailwind?
Yes — copy the hex into any tool or framework.
Is anything uploaded?
No — it is a static reference in your browser.
Is it free?
Yes — completely free with no sign-up.