Tailwind CSS Colors
Pick a color, see it on real components, copy the class. All 22 color families × 11 shades.
Component Previews
Buttons
Badges & Tags
Alerts
Information
This is an informational alert with your selected color.
Solid alert variant
Left-border alert variant
Card
Card Title
A preview card component with the selected color as accent.
Form Elements
Navigation
Notifications
New notification
You have a new message
Changes saved successfully!
Pricing
- Unlimited projects
- Priority support
- Custom domain
All blue shades
Frequently Asked Questions
How many colors does Tailwind CSS have?▼
Tailwind CSS v4 includes 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) each with 11 shades (50-950), totaling 242 unique colors.
What do the Tailwind color numbers mean?▼
The numbers (50-950) represent the shade intensity. 50 is the lightest, 500 is the base shade, and 950 is the darkest. Lower numbers are great for backgrounds, 500-600 for primary actions, and 700-900 for text on light backgrounds.
How do I use Tailwind color classes?▼
Prefix the color with its purpose: bg-blue-500 for background, text-blue-500 for text color, border-blue-500 for borders, and ring-blue-500 for focus rings. You can also use hover:, focus:, and dark: modifiers like hover:bg-blue-600.
Can I see how a color looks on a component?▼
Yes! Click any color swatch in the palette to see it applied to live component previews — buttons, badges, alerts, cards, form elements, navigation, notifications, and pricing cards update in real-time.
What is the difference between slate, gray, zinc, neutral, and stone?▼
They differ in undertone: Slate has a blue undertone, Gray is slightly warm, Zinc is a pure neutral with minimal warmth, Neutral is perfectly neutral, and Stone has a warm/brown undertone. Choose based on your design's personality.