Tools
Tailwind shade generator
Tailwind CSS colour shade generator
Generate a full 50–950 shade scale from one colour for use in Tailwind CSS.
About this tool
Tailwind arranges every colour into a scale of eleven shades, from 50 (nearly white) to 950 (nearly black). This tool builds that full scale from your brand colour, so you can use classes such as bg-primary-100 or text-primary-700 and get consistent results. It is just as useful outside Tailwind, for building the tints and shades of a design system or the colour variables of any website.
Choose the base colour with the picker or paste its HEX code, give it a name (for example “primary” or “brand”) and pick a generation mode: Classic, Hue shift, Luminance anchored, Vivid or Muted. You will see the eleven shades as a strip and in a table; click any of them to copy it. Below are three blocks ready to copy: CSS variables, CSS variables in OKLCH and the Tailwind config snippet.
The calculation runs in your browser and nothing is sent to a server. Shades are generated in OKLCH with a fixed lightness for each level, so your base colour will not necessarily land exactly on 500: the 500 shade will be a mid-lightness tone with the same hue. Some very saturated shades are clipped to the sRGB limit. The tool does not measure contrast between shades for accessibility.
Frequently asked questions
How do I add a custom colour to Tailwind?
Copy the “Tailwind config” block and paste it inside theme.extend.colors in tailwind.config.js. In Tailwind v4, paste the CSS variables inside @theme and change the prefix to --color-, for example --color-primary-500.
Why is my colour not exactly the 500 shade?
Each level has a fixed lightness so that every scale stays consistent with the others. Your colour sets the hue and saturation, but if it is very light or very dark it will sit closer to 300 or 700.
Which generation mode should I pick?
“Classic” is closest to Tailwind’s default palettes. “Hue shift” warms the light shades and cools the dark ones for a more natural feel, “Vivid” pushes saturation and “Muted” gives understated tones for calm interfaces.
Can I open a colour here from another tool?
Yes. The palette generator and the palette extractor have a button next to each colour that opens this page with that colour already loaded.