FREE · DESIGN & CSS TOOLS
Tailwind Color Shade Generator.
Turn one brand colour into a full 50–950 Tailwind palette in OKLCH, with hex values, contrast ratios and ready code for Tailwind v4 @theme, v3 config or CSS variables.
Loading the calculator…
How to use Tailwind Color Shade Generator
Enter your base colour and a name. Copy the @theme block for Tailwind CSS v4, the v3 config or plain CSS variables.
How it works
Each step has a target OKLCH lightness from 0.971 (50) to 0.258 (950); chroma rises and falls around the middle in proportion to your colour, and is reduced where needed to stay in sRGB.
Example
Teal #0d9488 becomes 11 shades from #f2f7f6 to #072a26 and is kept exactly at step 600.
Questions about Tailwind Color Shade Generator
Is Tailwind Color Shade Generator free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
Lightness steps imitate Tailwind’s default palette; check important text pairs for contrast. Everything is calculated in your browser; nothing you type is uploaded. Review the result before using it in your work.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.