Tailwind CSS Palette Generator
Generate beautiful Tailwind CSS color palettes and config blocks.
Configuration
Generate standard shade distributions locally. Saturation boosts are calculated on light and dark extremes to avoid mud tones. Everything is calculated in the sandbox of your browser.
Shades Scale
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#edf3fd',
100: '#c9ddfc',
200: '#a7c7fb',
300: '#80aff9',
400: '#5e99f7',
500: '#3c83f6',
600: '#0b62ef',
700: '#094cb9',
800: '#063888',
900: '#002157',
950: '#000c1f',
}
}
}
}
}:root {
--color-brand-50: #edf3fd;
--color-brand-100: #c9ddfc;
--color-brand-200: #a7c7fb;
--color-brand-300: #80aff9;
--color-brand-400: #5e99f7;
--color-brand-500: #3c83f6;
--color-brand-600: #0b62ef;
--color-brand-700: #094cb9;
--color-brand-800: #063888;
--color-brand-900: #002157;
--color-brand-950: #000c1f;
}How to Use
Pick Core Color
Select your primary hex brand color in the picker.
Review Shades
Inspect the generated shades matching saturation and light curves.
Copy Config Code
Copy the theme configuration JSON block for tailwind.config.js.
Real-World Examples & Use Cases
Brand Color System Integration
When transitioning a brand design guide (which usually defines only one or two corporate brand colors) to a functional Tailwind web project, developers need complete 50-950 color scales for hover states, borders, and backgrounds. This tool generates the full scale instantly.
Designing Dark Mode UI Components
Creating clean dark mode interfaces requires muted shades and dark backgrounds. This generator outputs cohesive 800, 900, and 950 shades that retain your brand's undertone and temperature, ensuring a natural dark theme.
Tailwind Config Customization
When customizing configuration files like `tailwind.config.js` or CSS custom properties, designers copy the generated JSON color object directly into their theme extensions, establishing standardized color classes (e.g., `bg-brand-500`, `text-brand-100`).
How It Works
Tailwind HSL Color Shade Distribution Logic: The generator takes a single input color, converts it into the HSL (Hue, Saturation, Lightness) color space, and constructs a 50-950 scale by applying interpolation curves: 1. Hue Lock: Hue remains constant across all shades to preserve the root color family. 2. Lightness Distribution: Tailwind shades map to specific lightness percentages. Lightness is adjusted programmatically: - 50: ~95-97% lightness (light background highlight) - 500: The input core color's native lightness (base brand color) - 900-950: ~5-12% lightness (very dark backgrounds) 3. Saturation Curve Correction: Pure linear lightness adjustments often make light shades look washed out and dark shades look muddy. The algorithm applies a parabolic curve to saturation: increasing saturation for very light/dark shades and stabilizing it around mid-tones (400-600) to keep colors vibrant. Once HSL coordinates are calculated, the coordinates are converted back into standard hex strings and formatted into a Tailwind-compatible JSON config object.
Frequently Asked Questions
How is the HSL model better for palettes than HEX or RGB?▼
Why does Tailwind use a 50 to 950 numbering scale?▼
What is the 950 shade used for?▼
Can I use this generated config in regular CSS?▼
Related Tools
Explore other tools in this category.
JSON Formatter
Format, validate, prettify, and minify your JSON data quickly.
Password Strength Checker
Analyze how secure your password is and generate a strong one instantly.
CSS Unit Converter
Convert between CSS units: px, rem, em, pt, vw, vh, cm, mm, and inches.
Binary ? Text Converter
Convert plain text to binary code and decode binary back to readable text.
Text to Binary Converter
Convert letters and strings into computer binary format.
QR Code Generator
Create and download customized QR codes for URLs, text, and contacts.