About the Tailwind CSS Color Palette Generator
The Tailwind Color Palette Generator turns any hex color into a complete Tailwind CSS color scale with all 11 shades, from 50 to 950.
Your base color is pinned to its closest shade, so the generated palette stays true to your brand while matching the lightness curve of the default Tailwind colors like blue, emerald or slate.
Generate Tailwind shades from one color
Pick a brand color or paste a hex code and the generator instantly creates the full 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 shade scale. Add multiple base colors to build primary, secondary and accent palettes side by side.
Copy tailwind.config.js, @theme CSS or OKLCH values
Export the palette as a ready-to-paste tailwind.config.js colors snippet for Tailwind v3, as @theme CSS variables for Tailwind v4, or as plain CSS variables, JSON, CSV and SVG. Switch the color format between hex, RGB, HSL, OKLCH and Lab — OKLCH is the format Tailwind v4 uses for its default palette.
How do I generate a Tailwind color palette from a hex color?
Pick or paste a base color and the generator instantly builds a Tailwind-style scale with all 11 shades from 50 to 950. Your exact color is pinned to its closest shade, so the palette stays true to your brand.
What are the Tailwind 50-950 color shades?
Tailwind CSS names each shade in a color scale with a number from 50 (lightest) to 950 (darkest). Using the same 11 stops as the default Tailwind palette keeps custom colors consistent with built-in ones like blue-500 or slate-900.
Can I copy the palette into tailwind.config.js?
Yes. You can copy a ready-to-paste tailwind.config.js colors snippet for Tailwind v3, @theme CSS variables for Tailwind v4, plain CSS variables, JSON, CSV or SVG, and download the palette as a PNG image.
Does this work with Tailwind CSS v4 and OKLCH colors?
Yes. Export the palette as @theme CSS variables for Tailwind v4 and switch the color format to OKLCH, the format Tailwind v4 uses for its default palette. Hex, RGB, HSL and Lab are also supported.