Tailwind CSS Color Configuration Guide
Extend Tailwind with your custom color palettes. From single colors to full design systems with shade scales.
1
Configure
Add your colors to tailwind.config.js
2
Use Utilities
Apply with bg-, text-, border- classes
3
Build & Ship
Tailwind generates only used classes
Basic Configuration
Add a single custom color to your Tailwind theme. The simplest way to extend Tailwind's color palette.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: '#2D5BE3',
accent: '#E8453C',
}
}
}
}
Generated Utility Classes
bg-brand
Aa
text-brand
border-brand
Creating Color Scales
Build professional shade scales like Tailwind's built-in colors. Perfect for design systems.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#EEF2FF',
100: '#E0E7FF',
200: '#C7D2FE',
300: '#A5B4FC',
400: '#818CF8',
500: '#6366F1', // Base color
600: '#4F46E5',
700: '#4338CA',
800: '#3730A3',
900: '#312E81',
950: '#1E1B4B',
}
}
}
}
}
Color Scale Preview
50
100
200
300
400
500
600
700
800
900
950
<!-- Usage Examples -->
<button class="bg-primary-500 hover:bg-primary-600">
Primary Button
</button>
<div class="bg-primary-50 text-primary-900">
Light background with dark text
</div>
<div class="border-primary-300 text-primary-700">
Bordered card
</div>
Integrating Palette from swatches.net
Import any palette from our library directly into your Tailwind config.
// Fintech Blue Palette from swatches.net
module.exports = {
theme: {
extend: {
colors: {
fintech: {
darkest: '#0A1628',
dark: '#1B3A5C',
base: '#2D7DD2',
light: '#6CB4EE',
lightest: '#E8F1F8',
}
}
}
}
}
// Organic Food Greens Palette
module.exports = {
theme: {
extend: {
colors: {
organic: {
darkest: '#1B4332',
dark: '#40916C',
base: '#74C69D',
light: '#D8F3DC',
lightest: '#FFF1E6',
}
}
}
}
}
Advanced: Full Design System
A production-ready configuration with semantic naming and complete color system.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// Brand colors
brand: {
primary: '#2D5BE3',
secondary: '#E8453C',
accent: '#F4A940',
},
// Semantic colors
success: {
50: '#ECFDF5',
500: '#18A558',
700: '#0F7A3F',
},
warning: {
50: '#FEF3E8',
500: '#F4A940',
700: '#C77C1E',
},
error: {
50: '#FEF2F2',
500: '#E8453C',
700: '#C0362F',
},
// Neutral scale
neutral: {
50: '#FAFAF8',
100: '#F2F1EE',
200: '#E5E4E0',
300: '#D1D0CC',
400: '#9A9A9A',
500: '#6B6B6B',
600: '#4A4A4A',
700: '#333333',
800: '#1A1A1A',
900: '#0F0F0F',
}
}
}
}
}
Generating Shade Scales Automatically
Use these tools to generate perfect shade scales from a single base color.
Use HSL for Scales
Adjust lightness while keeping hue and saturation consistent to create harmonious scales.
Follow the 100-900 Pattern
Stick to Tailwind's convention: 50 (lightest), 500 (base), 900 (darkest) for consistency.
Test Contrast
Use our contrast checker to ensure text colors meet WCAG AA standards (4.5:1 minimum).
Semantic Naming
Use names like 'primary', 'success', 'danger' instead of color names for flexibility.
Quick Reference: Common Patterns
Replacing Default Colors
// Replace all default colors (use with caution)
module.exports = {
theme: {
colors: {
// This replaces ALL Tailwind colors
white: '#FFFFFF',
black: '#000000',
primary: { /* your scale */ },
gray: { /* your scale */ }
}
}
}
Using CSS Variables
// Reference CSS variables for dynamic theming
module.exports = {
theme: {
extend: {
colors: {
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
}
}
}
}
/* Then in your CSS */
:root {
--color-primary: #2D5BE3;
--color-secondary: #E8453C;
}
Opacity Utilities
<!-- Tailwind automatically generates opacity variants -->
<div class="bg-primary-500/50"> <!-- 50% opacity -->
<div class="bg-primary-500/75"> <!-- 75% opacity -->
<div class="bg-primary-500/90"> <!-- 90% opacity -->
Ready to Get Started?
Browse our palette library to find your perfect color scheme, then copy the Tailwind config directly into your project.