Tailwind CSS Color Reference
Complete Tailwind CSS default color palette with hex, RGB, and HSL values for every shade.
The Tailwind CSS Color System
Tailwind CSS ships with a carefully designed default color palette of 22 color families, each with 11 shade levels from 50 (lightest) to 950 (darkest). The palette is organized around perceptual uniformity, meaning each step in the scale represents a roughly consistent visual change in lightness. This makes it predictable to build UI components that look balanced without manual color tuning.
The five gray families (slate, gray, zinc, neutral, stone) offer different undertones for different design aesthetics. Slate leans cool with a blue tint, making it popular for tech and SaaS interfaces. Neutral is a pure gray with no color cast, ideal when you want your accent colors to be the only chromatic elements. Stone has a warm, organic feel that works well for editorial and lifestyle designs.
Core Color Families and Hex Values
Here is a reference for the most commonly used shade levels across key color families. The 500 shade is the "base" color, with lighter shades above and darker shades below:
- Red: 50: #FEF2F2, 100: #FEE2E2, 200: #FECACA, 300: #FCA5A5, 400: #F87171, 500: #EF4444, 600: #DC2626, 700: #B91C1C, 800: #991B1B, 900: #7F1D1D, 950: #450A0A
- Blue: 50: #EFF6FF, 100: #DBEAFE, 200: #BFDBFE, 300: #93C5FD, 400: #60A5FA, 500: #3B82F6, 600: #2563EB, 700: #1D4ED8, 800: #1E40AF, 900: #1E3A8A, 950: #172554
- Green: 50: #F0FDF4, 100: #DCFCE7, 200: #BBF7D0, 300: #86EFAC, 400: #4ADE80, 500: #22C55E, 600: #16A34A, 700: #15803D, 800: #166534, 900: #14532D, 950: #052E16
- Amber: 50: #FFFBEB, 100: #FEF3C7, 200: #FDE68A, 300: #FCD34D, 400: #FBBF24, 500: #F59E0B, 600: #D97706, 700: #B45309, 800: #92400E, 900: #78350F, 950: #451A03
- Purple: 50: #FAF5FF, 100: #F3E8FF, 200: #E9D5FF, 300: #D8B4FE, 400: #C084FC, 500: #A855F7, 600: #9333EA, 700: #7E22CE, 800: #6B21A8, 900: #581C87, 950: #3B0764
Customizing Colors in tailwind.config.js
To add custom colors while keeping the defaults, use the extend key in your Tailwind configuration. This is the recommended approach for adding brand colors alongside the built-in palette:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
950: '#172554',
}
}
}
}
}You can then use classes like bg-brand-500, text-brand-700, and border-brand-200 throughout your templates. To generate a complete shade scale from a single base color, use the gen8x.com palette generator in monochromatic mode and export as Tailwind config.
Dark Mode Color Strategies
Effective dark mode requires more than inverting colors. The standard approach is to flip the shade scale: backgrounds use 800-950 shades, surfaces use 700-800, and text uses 100-200. Colored elements shift to lighter shades to maintain visibility against dark backgrounds.
<!-- Light/dark mode pattern -->
<div class="bg-white dark:bg-gray-900">
<h1 class="text-gray-900 dark:text-gray-100">Title</h1>
<p class="text-gray-600 dark:text-gray-400">Body text</p>
<button class="bg-blue-600 dark:bg-blue-500
text-white">Action</button>
</div>Enable dark mode in your config with darkMode: 'class' for manual control (toggled via a class on <html>) or darkMode: 'media' to follow the operating system preference automatically. Always test contrast ratios in both modes using the color contrast checker to ensure accessibility compliance.
Frequently Asked Questions
How many colors are in the default Tailwind CSS palette?
The default Tailwind CSS palette 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, and rose. Each family has 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) for a total of 242 colors, plus black and white.
How do I customize colors in tailwind.config.js?
In tailwind.config.js, use the theme.extend.colors object to add custom colors without removing defaults. For example: module.exports = { theme: { extend: { colors: { brand: { 500: '#3B82F6', 600: '#2563EB' } } } } }. To completely replace the default palette, use theme.colors instead of theme.extend.colors.
What is the difference between slate, gray, zinc, neutral, and stone?
These are five gray families with different undertones. Slate has a blue undertone (cool). Gray is a balanced blue-gray. Zinc has a slightly warm tone. Neutral is a pure gray with no color cast. Stone has a warm, slightly brownish undertone. Choose based on your design's color temperature -- cool designs pair well with slate, warm designs with stone.
What shade should I use for body text?
For body text on a white background, use shades 700-900 for WCAG AA compliance. Gray-700 (#374151) on white gives a contrast ratio of about 10.3:1, which passes both AA and AAA. For dark mode with a gray-900 background, use shades 100-300 for text. Avoid using 400 or 500 for body text as they typically fail contrast requirements on both light and dark backgrounds.
How do I use Tailwind colors with dark mode?
Tailwind's dark mode uses the 'dark:' prefix to apply different colors when dark mode is active. A common pattern is to invert the shade scale: use bg-white dark:bg-gray-900 for backgrounds and text-gray-900 dark:text-gray-100 for text. For colored elements, swap to lighter shades in dark mode: bg-blue-600 dark:bg-blue-400. Enable dark mode in tailwind.config.js with darkMode: 'class' or darkMode: 'media'.
Related Tools
- Hex to RGB Converter — Convert Tailwind hex values to RGB
- Color Contrast Checker — Test Tailwind color pairs for accessibility
- CSS Gradient Generator — Create gradients with Tailwind colors
Built by Michael Lip. 100% client-side.