A consistent interface
See the same scale working across light and dark surfaces.
Primary actionPrivate browser utility / Color & Design
Tailwind Palette Generator
Runs entirely in your browser - no upload, no sign-up.
Start with one color
Shape your Tailwind scale
Used in classes such as bg-brand-500.
This shade keeps your exact input color.
11 production-ready shades
Your color scale
A consistent interface
See the same scale working across light and dark surfaces.
Primary actionReady to paste
Choose your project format
What is a Tailwind palette generator?
A Tailwind palette generator turns one brand color into a complete 11-step scale from 50 to 950. Choose which shade keeps your exact input, preview the result on light and dark surfaces, then copy the palette as Tailwind v4 theme variables, a v3 config object, CSS variables, or JSON.
02
How to use
- 01Enter your base color
Type a 3- or 6-digit hex value or use the color picker. The 11 shades update instantly.
- 02Choose the anchor shade
Select the step that must equal your exact input. Shade 500 is the common default, while 400 or 600 may fit lighter or darker brand colors.
- 03Name and inspect the scale
Set a lowercase token name, then click individual swatches to copy hex values and check the light and dark previews.
- 04Copy the right format
Choose Tailwind v4, Tailwind v3, CSS variables, or JSON and copy the complete code block.
03
Who it's for
- Front-end developers extending a Tailwind theme with a custom brand or product color.
- Design-system teams turning an approved hex into consistent background, border, hover, and text tokens.
- Product designers testing one scale across both light and dark interface surfaces before handing it to engineering.
- Agencies creating copy-ready Tailwind, CSS, or JSON tokens for several client identities.
Tailwind projects need more than one brand hex. Hover states, subtle backgrounds, borders, readable text, and dark themes all need related shades. This tool creates that ladder in perceptually uniform OKLCH color space, reduces chroma when a generated shade falls outside the sRGB gamut, and keeps your chosen anchor color byte-for-byte.
Tailwind v4 uses @theme variables in the --color-* namespace. The v4 export follows that convention with OKLCH values, while the v3 export produces an extend.colors object with hex values.
FAQ
Is this Tailwind palette generator free?
Yes. You can generate and copy unlimited color scales without an account, watermark, or paid export. Every format shown in the workspace is available immediately.
Is my brand color uploaded anywhere?
No. Palette generation and export formatting run entirely in your browser. The hex value and color name you enter are not sent to a processing server.
What shades does a Tailwind color palette include?
A current Tailwind color family normally contains 11 numbered steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Lower numbers are lighter and higher numbers are darker.
Does the base color have to be shade 500?
No. Shade 500 is a useful default, but you can anchor your input at any step from 50 to 950. The generator keeps that anchor exact and redistributes lighter and darker steps around it.
Should I use Tailwind v4 or v3 output?
Use the Tailwind v4 export for projects configured with CSS-first <code>@theme</code> variables. Use the v3 export when your project still extends colors in <code>tailwind.config.js</code>. CSS variables and JSON are framework-neutral alternatives.
Why does the generator use OKLCH?
OKLCH makes lightness changes more visually even than simple RGB or HSL mixing. It also separates lightness, chroma, and hue, so the generator can shape a readable ladder while preserving the character of your base color.
Are generated Tailwind shades automatically accessible?
No shade number guarantees accessible contrast. The preview helps you inspect the scale, but you should test every real text and background pair against the WCAG target your product requires.