← All Color Tools
🎯
Tailwind Colors
All 242 Tailwind CSS colors reference
🎨 Tailwind Colors
🎯 Tailwind Color
🎨 blue shades
50
#EFF6FF
100
#DBEAFE
200
#BFDBFE
300
#93C5FD
400
#60A5FA
500
#3B82F6
600
#2563EB
700
#1D4ED8
800
#1E40AF
900
#1E3A8A
950
#172554
Tailwind class example
bg-blue-500 text-white hover:bg-blue-600
❓ Frequently Asked Questions
Common questions about Tailwind Colors
What Tailwind colors?▼
Tailwind CSS includes 22 colors × 11 shades = 242 colors. Slate, gray, red, orange, yellow, green, blue, etc.
Free Tailwind reference?▼
Yes, 100% free. All Tailwind colors with HEX, classes. Click to copy. Search by name.
Color shades?▼
50 (lightest), 100, 200, 300, 400, 500 (default), 600, 700, 800, 900, 950 (darkest). Per color.
Most popular?▼
Slate, gray, blue, red, green most used. Slate replaced cool-gray. Gray replaced true-gray.
Custom colors?▼
Add via tailwind.config.js. Extend default palette. Use HEX/HSL/RGB. Generate via shades tool.
Class syntax?▼
bg-blue-500 (background), text-blue-500 (text), border-blue-500 (border), ring-blue-500 (focus ring).
Hover/active?▼
hover:bg-blue-600, active:bg-blue-700. Darker shade common pattern. Smooth interaction.
Dark mode?▼
dark:bg-gray-900 dark:text-white. Tailwind built-in dark mode. Class-based or media query.
Opacity?▼
bg-blue-500/50 (50% opacity). Or bg-blue-500 with bg-opacity-50. New syntax cleaner.
Migrate older Tailwind?▼
v3 deprecated some colors. coolGray → slate. Update tailwind.config.js. Use color renamer tool.