Tailwind Color Shade Generator

Tailwind’s colours come in scales: a name followed by a number from 50 for the faintest tint to 950 for the deepest shade. When a client gives you one brand colour, you need the whole scale so that backgrounds, borders, hover states and text all share a hue. Building eleven matching values by hand means eyeballing each one. This generator derives them from your starting colour, keeps that colour exactly where it belongs and writes the code to paste into your project.

How the scale is built

The base colour is converted to OKLCH, a colour space in which lightness, chroma and hue can be moved separately without surprising shifts in the perceived hue. Lightness steps from a very light value at 50 to a very dark one at 950. Hue stays fixed, and chroma, the intensity of the colour, is reduced towards both ends so that the lightest and darkest steps look calm instead of neon. Each value is checked against the sRGB gamut, which is what ordinary screens display, and pulled back inside it if necessary.

A worked example

Press Sample for #3b82f6, named brand, in the Tailwind v4 format. Its lightness is closest to step 500, so the 500 swatch is your exact colour, marked “your colour”. The generated scale reads 50 #f0f5fe, 100 #dbe9fe, 200 #c3d9fd, 300 #99bffc, 400 #67a1ff, 500 #3b82f6, 600 #2c6ace, 700 #2056ae, 800 #164693, 900 #0d397e and 950 #02255c. In v4 format the output is an @theme block with lines such as --color-brand-500: #3b82f6;, which makes classes like bg-brand-500 and text-brand-700 available. Choose CSS variables and the same values appear as --brand-500 inside :root.

Reading the contrast numbers

Each swatch carries a ratio such as 5.71:1. It is the WCAG contrast ratio between the shade and the label colour the page picked for it, black or white. For the sample, step 500 shows 5.71 and step 600 shows 5.17, and both are well above the 4.5 to 1 that WCAG 2 asks of normal text. Use these numbers to decide which steps can host text: pale steps need dark text, deep steps need white, and the mid steps are the ones to test carefully against your actual text colour with the contrast checker.

Choosing the base colour

Enter a six-digit hex, or rgb(), hsl() or oklch(). A highly saturated colour yields a vivid middle and soft extremes. A very dark base lands near step 900 or 950 and leaves the light steps with much of the range; a very light base lands near 100 or 200. Neutral colours with almost no chroma produce a grey scale tinted only slightly toward the original hue. The name field becomes part of every variable, so use a name that describes the role, such as brand, accent or primary.

Edge cases

Two colours that look alike on screen can have very different lightness, so compare the swatches before trusting a name. Print and colour-managed displays may show the scale slightly differently from sRGB. If the brand guide fixes specific values for a few steps, replace them in the output; the other steps will still be consistent in hue. The scale is monotonic in lightness, so hover states can safely be one step darker.

Limits

The scale resembles Tailwind’s built-in palettes in structure but is not the same algorithm, so a built-in blue-600 will not equal the generated 600. The generator does not check that your design passes accessibility as a whole and does not produce dark-mode variants. Everything is calculated in your browser.

Related tools

• Color Palette Generator suggests harmonies to pair with the scale.
• Contrast Checker tests specific text and background pairs.
• Accessible Palette Contrast Matrix checks every pair in a palette at once.
• Color Converter switches between hex, RGB, HSL and OKLCH.