Tailwind Color Generator
Generate complete Tailwind CSS color palettes with shades from 50 to 950. Perfect for custom design systems and theme customization.
Tailwind Presets
Color Configuration
Used in exports (e.g., colors.blue.500)
Export Palette
Color Palette
Visual Preview
Usage Example
Recommended Settings
Tailwind Color System
- •Shade 500 is your base color - start here when creating custom palettes
- •Lighter shades (50-400) are for backgrounds, hover states, and subtle accents
- •Darker shades (600-950) work best for text, borders, and active states
- •Each shade automatically adjusts saturation for optimal visual consistency
- •Use consistent color names across your design system for maintainability
Best Practices
- •Brand Colors: Set shade 500 to your brand color, generate the full palette
- •Semantic Colors: Create success, warning, error palettes for UI feedback
- •Accessibility: Use 700+ shades for text on light backgrounds (WCAG AA)
- •Hover States: Go one shade darker/lighter for interactive elements
- •Export to Tailwind: Merge config into tailwind.config.js theme.extend.colors
Pro Tips
- •Test generated palettes on both light and dark backgrounds before committing
- •Shade 950 works great for dark mode backgrounds with subtle contrast
- •Export as CSS variables for use in non-Tailwind projects
- •Keep color names lowercase and hyphenated for consistency (e.g., 'brand-blue')
Most Popular
Use shade 500 as base, generate 11 shades (50-950) for full Tailwind compatibility
When to Use This Tool
Generate a complete Tailwind-compatible palette from your brand color. Set shade 500 to your primary brand color and get 11 perfectly balanced shades (50-950) that work across your entire design system. Export directly to your Tailwind config for instant integration.
Build comprehensive color systems with multiple semantic palettes (primary, secondary, success, warning, error). Each palette maintains visual consistency with Tailwind's default colors while reflecting your unique brand identity. Perfect for design tokens and style guides.
Create custom themes for Tailwind projects without manual color picking. Generate light and dark mode compatible palettes with proper contrast ratios. Export as CSS variables, SCSS, or JSON for maximum flexibility across different frameworks and tools.
Ensure all UI components use harmonious color shades from the same palette. Use lighter shades (100-300) for backgrounds, medium shades (400-600) for borders and hover states, and darker shades (700-950) for text and icons. Maintains visual hierarchy and accessibility.
How It Works
Choose a Tailwind preset (Slate, Blue, Emerald, etc.) or select your own custom base color
The base color becomes shade 500 - the middle of your 11-shade palette
Algorithm generates 11 shades (50, 100, 200...950) with adjusted lightness and saturation
Lighter shades (50-400) have reduced saturation for softer backgrounds
Darker shades (600-950) maintain higher saturation for rich, deep colors
Preview the full palette visually and copy individual shade values
Name your color (e.g., 'brand', 'primary') for use in Tailwind classes
Export as Tailwind config, CSS variables, SCSS, or JSON for your project
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What do the shade numbers (50-950) mean?
Tailwind uses a numeric scale where 50 is the lightest shade and 950 is the darkest. Shade 500 is the base/middle color. Lower numbers (50-400) are light colors for backgrounds and subtle elements. Higher numbers (600-950) are dark colors for text, borders, and emphasis. This standard scale ensures consistency across all Tailwind projects.
How is the palette generated from my base color?
Your base color becomes shade 500. The generator then creates lighter (50-400) and darker (600-950) variations by adjusting lightness in HSL color space. Saturation is automatically reduced for very light and very dark shades to match Tailwind's visual consistency. This creates a harmonious palette that works well across all use cases.
Can I use these colors in non-Tailwind projects?
Absolutely! Export as CSS variables (:root declarations), SCSS variables ($color-name), or JSON for use in any project. The color values are standard HEX codes that work everywhere. The Tailwind export is just one format option - the generated palette is universal and framework-agnostic.
How do I add these colors to my Tailwind config?
Export as Tailwind config, then merge the colors object into your tailwind.config.js under theme.extend.colors. For example: colors: { brand: { 50: '#...', 100: '#...', ... } }. Then use classes like 'bg-brand-500' or 'text-brand-700' throughout your project. Restart your dev server after config changes.
What shade should I use for text and backgrounds?
For light backgrounds: use shades 50-100 for backgrounds, 700-900 for text. For dark backgrounds: use shades 800-950 for backgrounds, 50-200 for text. For buttons: use 500-600 as base, 700 for hover, 50-100 for text. For borders: use 200-300 on light backgrounds, 600-700 on dark backgrounds. This ensures proper contrast and accessibility.
Why do the generated shades look different from my base color?
Tailwind palettes are designed for visual consistency across all shades, not exact color matching. Saturation is automatically reduced in very light (50-200) and very dark (900-950) shades because full saturation at extreme lightness levels looks unnatural. This creates a more professional, harmonious palette that works well in real interfaces.
Related Tools
Accessibility Color Checker
Check color accessibility compliance
Blue Color Generator
Generate blue color palettes
Color Converter
Convert between color formats
Contrast Checker
Check color contrast
Gradient Color Generator
Generate color gradients
Random Color Generator
Generate random colors