Tailwind CSS Color Chart
The complete official Tailwind default palette — 22 hues, 50–950 steps, 242 swatches. Click to copy HEX; hover for RGB, HSL, and OKLCH.
Black & white
Slate
Click a row to copy HEX
Gray
Click a row to copy HEX
Zinc
Click a row to copy HEX
Neutral
Click a row to copy HEX
Stone
Click a row to copy HEX
Red
Click a row to copy HEX
Orange
Click a row to copy HEX
Amber
Click a row to copy HEX
Yellow
Click a row to copy HEX
Lime
Click a row to copy HEX
Green
Click a row to copy HEX
Emerald
Click a row to copy HEX
Teal
Click a row to copy HEX
Cyan
Click a row to copy HEX
Sky
Click a row to copy HEX
Blue
Click a row to copy HEX
Indigo
Click a row to copy HEX
Violet
Click a row to copy HEX
Purple
Click a row to copy HEX
Fuchsia
Click a row to copy HEX
Pink
Click a row to copy HEX
Rose
Click a row to copy HEX
About the Tailwind color chart
A Tailwind color chart is the fastest way to pick a built-in utility class color without digging through documentation. Every swatch on this page matches Tailwind's shipped defaults — the same HEX values behind classes like bg-emerald-500, border-zinc-200, and text-indigo-600.
Use lighter steps (50–200) for backgrounds and subtle borders; mid steps (400–600) for buttons, links, and icons; darker steps (700–950) for text and dark-mode surfaces. Neutrals (slate, gray, zinc, neutral, stone) typically handle layout chrome while chromatic hues carry brand and state colors.
Building a custom brand scale instead of defaults? Try the Tailwind Scale Generator or browse more charts on the Color Charts hub.
Frequently asked questions
What are the Tailwind CSS colors?
50 (lightest) to 950 (darkest). Classes like bg-blue-500 and text-rose-700 map directly to these HEX values.How do I copy a Tailwind color?
Are these the official Tailwind CSS default colors?
tailwindcss/colors source. If you extend or override colors in your own tailwind.config, your project theme may differ.What is the difference between slate, gray, zinc, neutral, and stone?
Can I generate a custom Tailwind scale from my brand color?
tailwind.config.js.