Tailwind Color Generator
Pick your brand color and get a complete Tailwind-style scale from 50 to 950. Your exact color stays in the palette, the other shades are built in the perceptual OKLCH color space, and you can copy the code straight into your project.
Click a swatch to copy its HEX code. “AA” badges show which text color passes WCAG AA (4.5:1) on that shade.
Export
How to use the Tailwind Color Generator
- Enter your color as a HEX code or pick it with the color picker.
- Name the color, for example brand, primary or accent; the name is used in the exported code.
- Keep Closest shade (auto) or choose the shade where your exact color should sit.
- Press Generate palette and check the 11 swatches; click one to copy its HEX code.
- Choose an export format and press Copy code or Download to add the palette to your project.
How the 50–950 scale is calculated
The tool works in OKLCH: L is perceived lightness (0 to 1), C is chroma (colorfulness) and H is the hue angle. Equal steps in L look like equal steps to the eye, which is why Tailwind v4 also defines its palette in OKLCH.
- Your HEX color is converted to OKLCH, for example #3b82f6 → L 0.623, C 0.188, H 259.8°.
- The reference lightness of each shade (averaged from Tailwind's palettes) is compared with your L. The closest is 500 (reference 0.661), so #3b82f6 becomes blue-500.
- Lighter shades are remapped between your L and 1 (white): Li = 1 − (1 − refi) × (1 − L) ÷ (1 − refanchor). Darker shades between 0 and your L: Li = refi × L ÷ refanchor.
- Chroma follows Tailwind's curve, peaking around 600, and is scaled from your color's chroma. The hue stays constant.
- Each shade is converted back to sRGB; if it falls outside the screen gamut, chroma is lowered step by step until it fits.
Reference lightness of each shade
| Shade | OKLCH L | Relative chroma | Typical use |
|---|---|---|---|
| 50 | 0.975 | 6% | Page and card backgrounds |
| 100 | 0.943 | 13% | Hover backgrounds, badges |
| 200 | 0.897 | 25% | Borders, dividers |
| 300 | 0.829 | 45% | Disabled states, focus rings |
| 400 | 0.734 | 73% | Icons, placeholders |
| 500 | 0.661 | 92% | Primary brand color |
| 600 | 0.583 | 100% | Buttons, links |
| 700 | 0.507 | 93% | Button hover, text on light backgrounds |
| 800 | 0.439 | 77% | Headings |
| 900 | 0.389 | 59% | Dark sections |
| 950 | 0.265 | 38% | Deepest backgrounds, high-contrast text |
Tips for a usable brand palette
- Check text contrast. For white text on a colored button, 600 or 700 usually passes WCAG AA; use the badges on the swatches.
- Very light or very dark inputs compress one side of the scale. If your brand color is pale, consider placing it at 200 or 300 and using 600 for buttons.
- Neutral grays work too. A gray with a hint of hue (for example #64748b) gives a slate-style neutral scale.
- Keep names semantic. Names like primary, accent and danger make it easy to swap colors later.
Frequently asked questions
How does the generator create the shades?
It converts your color to OKLCH, a perceptual color space, and uses lightness and chroma curves averaged from Tailwind's built-in palettes. Lighter shades are spread between your color and white, darker shades between your color and black, keeping the same hue. Any shade outside the sRGB range has its chroma reduced until it fits.
Which shade will my color be?
In auto mode the tool compares your color's OKLCH lightness with the reference curve and places it at the closest shade. A mid blue like #3b82f6 lands on 500, a dark green may land on 700 or 800. You can force any shade with the Place my color at menu.
How do I add the colors to Tailwind CSS v3?
Copy the tailwind.config.js export into the theme.extend.colors section of your config. Then use classes such as bg-brand-500, text-brand-700 or border-brand-200. The DEFAULT key also enables bg-brand.
How do I use the palette with Tailwind v4?
Tailwind v4 is configured in CSS. Paste the @theme block into your main CSS file after @import "tailwindcss"; the --color-brand-500 style variables automatically create utilities like bg-brand-500.
What do the contrast numbers mean?
Each swatch shows whether white or dark text is easier to read on it and the WCAG contrast ratio. 4.5:1 or more (marked AA) is the minimum for normal body text; 3:1 is enough for large text and icons.
Can I use the colors without Tailwind?
Yes. The CSS variables, SCSS and JSON exports work in any project, design token pipeline or component library.