Tailwind CSS Colors
The full default Tailwind palette with hex & RGB.
The complete default Tailwind CSS color palette — all 22 families (slate, gray, red, orange, amber, green, emerald, teal, blue, indigo, violet, purple, pink, rose and more) across every shade from 50 to 950 — each with a live swatch, hex and RGB value. Search a class like blue-500, a hex like #ef4444, or filter by family, and tap a swatch or value to copy it. Runs fully in your browser — no API.
How to use Tailwind CSS Colors
Open the palette
Launch this free Tailwind colors tool to browse the entire default palette with live swatches.
Search a colour
Type a class like 'blue-500', a hex like '#ef4444', or a family name to filter instantly.
Filter by family
Use the family filter to see all shades (50–950) of one colour like rose or emerald.
Read hex & RGB
Each colour shows its Tailwind class name plus the hex and RGB values side by side.
Copy a value
Tap the swatch, hex or RGB to copy it, ready for your CSS, design tool or config.
Match a colour
Search a hex to find the closest Tailwind class, or a class to get its exact hex.
Frequently asked questions
What are the default Tailwind CSS colors?
Tailwind ships with a large default palette of 22 colour families — slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose — each with 11 shades from 50 (lightest) to 950 (darkest). This tool lists them all with their hex and RGB values.
What is the hex code for a Tailwind color like blue-500?
blue-500 is #3b82f6. Search this list for any Tailwind class (like 'red-600' or 'emerald-400') to see its exact hex and RGB value, or search a hex to find the matching class.
What do the shade numbers (50–950) mean?
The number is the lightness step: 50 is the lightest tint and 950 is the darkest shade of that colour, with 500 as the base. Lower numbers are lighter, higher numbers are darker.
How do I use these colors in Tailwind?
Use them as utility classes — for example bg-blue-500 for a background, text-rose-600 for text, or border-emerald-300 for a border. This tool helps you pick the right class and see its real colour.
Is this Tailwind colors tool free?
Yes — it's completely free with no sign-up. The full palette runs in your browser, so there are no limits, no API keys and nothing is uploaded.
What is the hex code for Tailwind red-500 or emerald-600?
red-500 is #ef4444 and emerald-600 is #059669. Search any Tailwind class in the list to see its exact hex and RGB, or paste a hex value to find the closest matching Tailwind class.
How many colors are in the default Tailwind palette?
The default palette has 22 colour families, each with 11 shades (50 to 950) — that's 242 colours in total, plus black, white, transparent and currentColor. This reference lists every family and shade with a live swatch.
Related tools — Color tools
- Color Picker & Converter — Pick a colour and convert HEX, RGB, HSL, HSV & CMYK.
- Color Palette Generator — Generate harmonious colour palettes from any base colour.
- CSS Gradient Generator — Build linear, radial & conic CSS gradients and copy the code.
- Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA & AAA.
- Material Design Colors — The full Material Design palette with hex & RGB.
- Tailwind Color Generator — Turn one base colour into a full 50–950 Tailwind shade scale.
- All HTML Color Codes — Every CSS named colour with its HEX, RGB & HSL values.