A Tailwind color palette generator creates the complete 11-shade scale (50 through 950) from any hex color you choose. Tailwind CSS expects colors to be defined as a set of numbered shades — this tool does the math automatically by fixing your color's hue and saturation and varying its lightness, then outputs the palette as a ready-to-paste Tailwind config object, CSS custom properties, or individual hex codes.
Pick a Base Color
Generated Palette
Shade 500 = your colorExport Palette
How to Use the Tailwind Color Palette Generator
Tailwind CSS is built around a system of numbered color shades. Every built-in color — from slate to rose — ships with shades ranging from 50 (near-white) to 950 (near-black). When you add a custom brand color to your project, Tailwind expects the same 11-shade structure. This Tailwind color palette generator creates that structure for you automatically from any single hex color you choose.
Step 1: Enter your base color
Click the color swatch to open the browser color picker, or type a hex value directly into the input field (with or without the # prefix). Your chosen color is placed at shade 500, which is the mid-tone position in Tailwind's convention. The remaining 10 shades are generated instantly.
Step 2: Review the generated shades
The palette grid shows all 11 swatches from 50 (lightest) to 950 (darkest). Each swatch displays its hex code along with the WCAG contrast ratio for both white and black text. Use the contrast numbers to decide which shades work well as text colors and which work best as backgrounds. A green badge means the contrast ratio meets WCAG AA (4.5:1) for normal-sized text.
Step 3: Copy and use in your project
There are three ways to use the palette. Click Copy Tailwind Config to get a JavaScript object ready to paste into your tailwind.config.js under theme.extend.colors. Click Copy CSS Variables to get a block of custom property declarations to paste into your :root {} rule. Or click the copy icon next to any individual swatch to grab just that shade's hex code.
How the algorithm works
The generator converts your hex color to HSL (hue, saturation, lightness). It then keeps the hue and saturation constant while applying a fixed lightness value to each shade: 97% for shade 50, 93% for 100, 85% for 200, 74% for 300, 61% for 400, 50% for 500, 40% for 600, 30% for 700, 20% for 800, 15% for 900, and 8% for 950. This mimics the way Tailwind's own palettes are constructed, producing a natural-looking scale that works well in UI design.
FAQ
How does the Tailwind color palette generator work?
The generator takes your input hex color and converts it to HSL (hue, saturation, lightness). It keeps the hue and saturation fixed, then produces 11 shades by varying the lightness — from near-white at shade 50 to near-black at shade 950. Your input color is mapped to shade 500, matching Tailwind's convention.
Can I use any hex color as input?
Yes. Paste any 3- or 6-digit hex color (with or without the # prefix) and the tool instantly generates the full 11-shade palette. The generator works with vivid brand colors, muted neutrals, and everything in between.
How do I add the generated palette to my Tailwind config?
Click 'Copy Tailwind Config' to get a ready-to-paste JavaScript object. Open your tailwind.config.js file, find the theme.extend.colors section, and paste the object there. Give the palette a name (e.g., 'brand') and Tailwind will generate all 11 utility classes automatically.
What are the CSS custom properties (variables) output for?
The CSS variables output lets you use the palette in any CSS or design system — not just Tailwind. Paste the block into your :root {} rule and reference shades with var(--color-50), var(--color-500), etc. This is handy for vanilla CSS projects or frameworks other than Tailwind.
What do the white/black contrast ratios on each swatch mean?
Each swatch shows the WCAG contrast ratio of white text and black text against that shade's background. A ratio of 4.5:1 or higher passes WCAG AA for normal text. This helps you instantly see which text color is more readable on a given shade — important for accessible UI design.
Is the generated palette identical to Tailwind's built-in palettes?
Not exactly. Tailwind's built-in palettes are hand-crafted by designers for each color family. This generator uses an algorithmic approach (fixed hue and saturation, varied lightness in HSL space) to produce consistent, predictable shades. The result closely matches Tailwind's style but may differ slightly from the official presets.
Is this tool free and does it store my colors?
Yes, it is completely free with no account needed. All processing happens in your browser — no color data is ever sent to a server or stored anywhere. You can use it offline once the page is loaded.