Tailwind Color Palette Generator

How a Tailwind 50 to 950 Color Scale Is Generated

Tailwind organises every colour as a scale of eleven steps numbered 50, 100, 200 and so on up to 950, where 50 is nearly white and 950 is nearly black, and the recognisable base sits around 500. Adding a custom brand colour therefore means producing all eleven shades, not the single hex your designer handed you. This generator does that from one input and emits a tailwind.config.js block you can paste straight into theme.extend.colors. Front-end developers theming a client project, design system maintainers adding a semantic colour, and anyone who has tried to eyeball eleven balanced tints in a colour picker will recognise the problem it solves. The method is a controlled lightness remap in HSL. Your hex is converted to hue, saturation and lightness; the hue and saturation are then held constant while lightness is reassigned for each step on a curve that runs high at 50 and low at 950. Keeping hue fixed is what makes the scale feel like one colour rather than eleven related ones, and keeping saturation fixed stops the light shades washing out into grey. That is broadly how Tailwind own palettes are built, which is why a generated scale sits comfortably next to the built-in slate and indigo families. Each result is converted back to hex, shown as a clickable swatch, and assembled into the config object under whatever key you name, so the whole scale is one paste rather than eleven. The naming matters because that key becomes the middle segment of every utility class you write afterwards. Run a real colour. Take the sky blue hex 0ea5e9, which in HSL is hue 199, saturation 89 percent, lightness 48 percent. Holding hue at 199 and saturation at 89, the generator sets lightness to 97 percent for step 50 giving hex f1fafe, an almost-white tint suitable for a page background. Step 200 at 86 percent lightness gives bce7fb for a subtle border. Step 500 stays near the original at hex 0da2e7. Step 700 drops to 35 percent giving 0a76a9, dark enough for body text on a white card. Step 950 falls to 15 percent giving 043348, which works as a dark-mode surface. Eleven values, one hue, and the relationship between any two of them is predictable. Where it saves time. An agency onboarding a new client converts the brand hex from the style guide into a full scale in under a minute and ships a themed build the same day. A team replacing Tailwind default blue with their own brand colour keeps every existing utility class working, because the class names depend on the key and the step, not the colour. A developer building a dark mode uses the 900 and 950 steps as surfaces and the 200 and 300 steps as text, which reads well because the contrast relationship is consistent. Someone documenting a design system exports all eleven hex values into a table. Two honest notes. A generated scale is mathematically consistent but not hand-tuned, and Tailwind official palettes were adjusted by eye because perceived brightness does not track HSL lightness linearly; yellows and cyans in particular can look lighter than the number suggests. Expect to nudge one or two steps. The pitfall worth flagging is contrast: do not assume a shade is accessible because it sits at a particular step. Check your real text and background pairs against the 4.5 to 1 ratio, since a 500 shade on white passes for some hues and fails for others. Test the light shades against dark text and the dark shades against white before locking the palette. Generation happens entirely in your browser and nothing is uploaded.

🔥 Trending Tools