Tailwind CSS Color Palette
Complete Tailwind CSS 3.x default color palette — every shade from 50 to 950 with hex values.
How to Use
- Click any swatch to copy its hex.
- Shades go 50 (lightest) → 950 (darkest).
| name | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| slate | |||||||||||
| gray | |||||||||||
| zinc | |||||||||||
| neutral | |||||||||||
| stone | |||||||||||
| red | |||||||||||
| orange | |||||||||||
| amber | |||||||||||
| yellow | |||||||||||
| lime | |||||||||||
| green | |||||||||||
| emerald | |||||||||||
| teal | |||||||||||
| cyan | |||||||||||
| sky | |||||||||||
| blue | |||||||||||
| indigo | |||||||||||
| violet | |||||||||||
| purple | |||||||||||
| fuchsia | |||||||||||
| pink | |||||||||||
| rose |
Notes
About the Tailwind CSS Color Palette
Whether you are at a desk or on your phone, the Tailwind CSS Color Palette makes colour and design work easy — and it is completely free. Complete Tailwind CSS 3.x default color palette — every shade from 50 to 950 with hex values.
How it works
Everything is laid out so you can find what you need fast. There are no long tables to dig through. The page also works without internet once it has loaded, so you can use it anywhere.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
How do I use the Tailwind CSS Color Palette?
Simply type your numbers and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Is it free? Does it work without internet?
Yes to both. It is free with no sign-up, and once the page has loaded it keeps working even with no internet.
Where does my data go?
Nowhere — every calculation runs on your own device. Nothing you enter is uploaded, logged, or stored.
Common Use Cases
Check your work
Worked it out yourself? Use the Tailwind CSS Color Palette to make sure your answer is right.
Learn while you do it
Seeing what you put in and what comes out helps you understand how they fit together.
Get an answer fast
Type what you have and get the answer in seconds — on a phone, tablet, or computer.
Safe and private
Everything you type stays on your device. Nothing is sent to a server or saved.
Last updated: