Complete Tailwind CSS v3 color reference. Click any color to copy. Generate custom palettes from any hex.
Pick a base color to generate a Tailwind-style 50-950 shade palette.
Tailwind CSS includes a carefully curated default color palette with 22 color families, each with 11 shades from 50 (lightest) to 950 (darkest). These colors are designed to work together harmoniously in any combination.
Apply colors with utility classes:
/* Background */ <div class="bg-blue-500">...</div> /* Text */ <p class="text-gray-700">...</p> /* Border */ <div class="border border-indigo-300">...</div> /* Ring / Outline */ <button class="ring-2 ring-purple-500">...</button>
Extend or override the default palette:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#3b82f6',
900: '#1e3a5f',
}
}
}
}
}
When choosing text/background combinations, ensure sufficient contrast for WCAG compliance. Use our detail panel's contrast checker — click any color swatch to see WCAG AA/AAA ratings against white and black backgrounds.
Convert between HEX, RGB, HSL, and CMYK with our free color tool.
Color Converter →Tailwind CSS uses a semantic color palette with named colors (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink, rose) each with 11 shades from 50 (lightest) to 950 (darkest). Colors are used via utility classes like bg-blue-500, text-gray-900, or border-red-200.
Add custom colors in tailwind.config.js under theme.extend.colors. Provide a name and hex value: colors: { brand: '#FF6B35' }. To create a full shade palette, use a nested object with shade numbers as keys. You can reference custom colors in all utility classes: bg-brand, text-brand. Use CSS variables for runtime theming.
These are five distinct gray palettes with different undertones. Slate has blue-gray undertones. Zinc is more neutral with a slight blue tint. Gray is a pure neutral gray. Neutral is slightly warmer. Stone has warm brown undertones. Pick one consistently — mixing grays can look inconsistent in UI components.
For light mode: bg-white or bg-gray-50, body text text-gray-900, secondary text text-gray-600. For dark mode: bg-gray-900 background, text-gray-100 body text, text-gray-400 secondary. For primary accents, 500-600 works well. Always follow WCAG contrast ratios: 4.5:1 minimum for normal text.
Yes. Tailwind v3+ exposes colors as CSS variables when configured. You can also copy hex values directly from this palette and use them in plain CSS. For dynamic theming, define Tailwind colors as CSS custom properties in your base layer and reference them with var() throughout your stylesheets.