Tailwind CSS Colors Palette Reference
Tailwind colors are right here in one searchable grid — all 242 values across 22 color families, each with 11 shades from 50 (lightest) to 950 (darkest). Click any swatch to copy its class name or color value instantly, no jumping back to the docs.
The palette is split into 5 neutral families (Slate, Gray, Zinc, Neutral, Stone) for text, backgrounds, and borders, plus 17 hued families from Red through Rose for accents and themes. It's built for front-end developers and designers who want a fast way to browse, look up a HEX code, and grab the exact value they need.
How to Use
Browse the grid
Each row shows a family name on the left and its 11 shades, lightest (50) to darkest (950). Hover any swatch to see its shade number and HEX value.
Search and filter
Type a family name like blue or a HEX value like #3b82f6 to filter as you type. Use the filter dropdown to show All Colors, Hued Colors, or Neutrals only.
Pick a format and copy
Choose Class Name, HEX, RGB, or HSL from the format dropdown, then click any swatch to copy that value to your clipboard.
Open the detail view
Double-click a swatch to open the detail modal. See the class name, HEX, RGB, and HSL all at once, copy any one of them, and jump to other shades in the same family.
Save and export favorites
Click the star on any swatch to add it to your favorites. Open the favorites panel and use Export CSS to copy every favorite as a set of CSS custom properties ready to paste into your stylesheet.
Features
Complete Color Palette
All 242 Tailwind colors in one grid — 22 families with 11 shades each — laid out so you can compare shades within a family at a glance.
Multiple Copy Formats
Copy a color as a Class Name (bg-blue-500), HEX, RGB, or HSL — pick the format from a dropdown and click to copy.
Favorites System
Star the colors you use most. Favorites are kept in your browser's local storage, so they persist across sessions on the same device.
Export as CSS Variables
Turn your favorites into CSS custom properties with one click, ready to drop into a :root block for a custom project palette.
Color Detail Modal
Double-click any color for the full picture: class name, HEX, RGB, and HSL together, plus quick links to every other shade in the family.
Smart Search
Find colors instantly by family name or HEX value. The grid filters in real time as you type, and a category filter narrows it to neutrals or hued colors.
Your Data Stays Private
The palette is bundled in the app and runs entirely in your browser. No server requests, favorites saved locally, and it works offline after the first load.
Frequently Asked Questions
How many colors and shades does Tailwind have?
This tool covers 22 color families, each with 11 shades from 50 (lightest) to 950 (darkest) — 242 colors in total. Five families are neutrals (Slate, Gray, Zinc, Neutral, Stone) and the other 17 are hued, from Red through Rose.
What HEX code is bg-blue-500?
bg-blue-500 is #3b82f6. To find any other color's HEX, search the family name or hover the swatch — the shade number and HEX value are shown right on it, and the detail modal lists HEX, RGB, and HSL together.
How do I copy a Tailwind color's HEX or RGB?
Set the format dropdown to HEX or RGB, then click any swatch to copy that value. You can also double-click a swatch to open the detail modal and copy the class name, HEX, RGB, or HSL individually.
How do I use a color class like bg-, text-, or border-?
The class format copies a background class such as bg-blue-500, ready to drop into your HTML with Tailwind CSS. For text color swap the prefix to text-blue-500, and for borders use border-blue-500 — the family and shade stay the same.
What's the difference between the neutral colors?
Tailwind ships five neutral families with subtle tints: Slate is a cool gray with a blue lean, Gray is a balanced neutral, Zinc is cool but slightly warmer than Slate, Neutral has no color cast at all, and Stone is a warm gray with a hint of brown.
Can I use these colors without Tailwind CSS?
Yes. Copy the HEX, RGB, or HSL value and use it in any CSS file, design tool, or app — the colors work on their own without the Tailwind framework.
Are my favorites saved, and how do I export them?
Favorites are stored in your browser's local storage, so they persist across sessions on the same device and browser; clearing your browser data removes them. Open the favorites panel and click Export CSS to copy every favorite as CSS custom properties you can paste into a stylesheet.
No comments yet. Be the first to comment!