Tailwind CSS Palette Generator
Generate custom color palettes with full shade scales, WCAG accessibility checks, and export to Tailwind config, CSS variables, or shadcn/ui theme. All client-side.
50
#f3f3fc
100
#e7e7f9
200
#bdbff9
300
#8f91f5
400
#575af0
500
#1519ea
600
#1114bb
700
#0d1096
800
#0a0c70
900
#0f114d
950
#08092b
WCAG Contrast — White text / Black text
50
100
200
300
400
500
600
700
800
900
950
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand': {
50: '#f3f3fc',
100: '#e7e7f9',
200: '#bdbff9',
300: '#8f91f5',
400: '#575af0',
500: '#1519ea',
600: '#1114bb',
700: '#0d1096',
800: '#0a0c70',
900: '#0f114d',
950: '#08092b',
},
},
},
},
};Understanding the Tailwind CSS Color System
Tailwind CSS uses a numeric shade scale from 50 (lightest) to 950 (darkest) for every color. Each shade is designed to work harmoniously within the same palette and across different colors. The default palette includes colors like slate, gray, zinc, red, orange, amber, and many more — each with 11 carefully tuned shades.
When building a brand or custom design system, the default palette may not include your exact brand color. This tool lets you input any color and generates a full 11-shade palette that follows the same lightness distribution as Tailwind's built-in colors. The algorithm uses HSL interpolation to produce consistent, visually balanced shades from a single base color.
How Color Shades Work
Each shade number corresponds to a target lightness level. Shade 50 is near-white (97% lightness), 500 is the "base" mid-tone, and 950 is near-black (10% lightness). The hue stays constant while saturation is slightly reduced at the extremes to prevent garish highlights or muddy darks.
This approach mirrors how Tailwind's own palette is built. By using HSL interpolation rather than simple opacity adjustments, each shade maintains its color identity and produces predictable contrast ratios — essential for accessible UI design.
Color Accessibility Guide
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA compliance requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA compliance requires 7:1 for normal text and 4.5:1 for large text.
As a rule of thumb: use shades 600–950 as backgrounds with white text, and shades 50–300 as backgrounds with dark text. The contrast checker above shows exactly which combinations pass AA and AAA standards for both white and black text.
Frequently Asked Questions
How does the palette generation algorithm work?
The generator takes your base color, converts it to HSL (Hue, Saturation, Lightness), and maps each Tailwind shade (50–950) to a specific lightness value. The hue remains constant while saturation is slightly adjusted at the lightest and darkest extremes to produce natural-looking results. This mimics how Tailwind's built-in palettes are constructed.
What is WCAG contrast checking and why does it matter?
WCAG contrast checking measures the luminance difference between foreground text and its background color. A ratio of 4.5:1 or higher (AA level) ensures readability for most users, including those with low vision. AAA level (7:1) provides even better readability. This tool shows pass/fail status for both white and black text on every shade.
Can I use the generated palette directly in my Tailwind project?
Yes! Switch to the 'Tailwind Config' tab to get a ready-to-paste JavaScript snippet for your tailwind.config.js file. You can also export as CSS custom properties or shadcn/ui theme format. The color name you specify (e.g., 'brand') becomes the utility class prefix — so 'bg-brand-500', 'text-brand-200', etc.
What's the difference between CSS variables and Tailwind config output?
The Tailwind config output extends your theme directly with hex values, enabling utility classes like 'bg-brand-500'. CSS variables output defines custom properties on :root, useful when you need runtime theme switching or framework-agnostic styling. The shadcn/ui output uses HSL format variables that integrate with shadcn's theming system.
Is my color data sent to any server?
No. All color calculations happen entirely in your browser. No data is transmitted to any server. The palette generation, contrast checking, and code export all run client-side using JavaScript.
Why do very saturated colors look different at shade 50 or 950?
At extreme lightness values (near-white or near-black), highly saturated colors can appear garish or muddy. The algorithm intentionally reduces saturation at these extremes — typically by 20–30% — to produce more natural, usable shades that align with Tailwind's design philosophy.
How do I choose between light and dark mode text colors?
Use the dark mode preview toggle to see your palette on a dark background. Generally, use lighter shades (50–400) for text on dark backgrounds, and darker shades (600–950) for text on light backgrounds. Always verify with the WCAG contrast checker to ensure accessibility compliance.
Related Tools
Format, validate, and beautify JSON with tree view and TypeScript type generation.
Test regular expressions with real-time matching, capture groups, and code snippets.
Generate UUID v4, v7, ULID, and Nano ID with bulk generation and format options.
Encode and decode text, images, and files to Base64 with real-time conversion.