ColorKitBrand hex to 50-950
Tailwind color generator on the measured curve
Free, no signup: drop in one hex and this builds all eleven steps from 50 to 950 along the lightness curve measured from Tailwind's nine default families — L* 97.3, 94.3, 89.1, 81.4, 69.6, 57.5, 47.0, 38.2, 29.7, 23.5 and 11.9, gaps that run from 3.0 points to 11.8 rather than dividing a range evenly. Your color is kept exactly where its own lightness puts it, chroma follows the measured curve that peaks at 600 instead of 500, and any rung sRGB cannot hold is pulled to the gamut edge and labelled. Copy the result as a v4 @theme block or as a tailwind.config.js object.
- 100% free
- No signup
- 11 steps
- v4 and v3 output
- Gamut-fitted chroma
Press Ctrl+V anywhere on the page to drop in your brand hex and the whole family rebuilds around it — no need to click the field first.
- 50#f8f6ff
L* 97 · C* 5
black text 19.6:1
chroma clipped
- 100#f1edff
L* 94 · C* 10
black text 18.3:1
chroma clipped
- 200#e4ddff
L* 90 · C* 18
black text 16.1:1
chroma clipped
- 300#d0c6ff
L* 82 · C* 31
black text 13.2:1
chroma clipped
- 400#afa3ff
L* 71 · C* 50
black text 9.5:1
chroma clipped
- 500#8781ff
L* 60 · C* 71
black text 6.6:1
chroma clipped
- 600seed#6366f1
L* 50 · C* 80
black text 4.7:1
- 700#4a50cb
L* 41 · C* 74
white text 6.3:1
- 800#393d9f
L* 31 · C* 61
white text 8.9:1
- 900#2f317c
L* 25 · C* 49
white text 11.3:1
- 950#191a48
L* 12 · C* 33
white text 16.4:1
The seed is kept byte for byte at step 600, where its L* of 50.1 is closest to the reference curve. Steps 50, 100, 200, 300, 400, 500 asked for more chroma than sRGB holds at that lightness and were pulled back to the gamut edge.
@theme {
--color-brand-50: #f8f6ff;
--color-brand-100: #f1edff;
--color-brand-200: #e4ddff;
--color-brand-300: #d0c6ff;
--color-brand-400: #afa3ff;
--color-brand-500: #8781ff;
--color-brand-600: #6366f1;
--color-brand-700: #4a50cb;
--color-brand-800: #393d9f;
--color-brand-900: #2f317c;
--color-brand-950: #191a48;
}How to generate a Tailwind color scale
One hex in, eleven steps out, and the block pasted into whichever half of Tailwind your project keeps its theme in.
Give it the color you already have
Paste the brand hex, pick it from the swatch button, or type any notation the parser accepts. The generator immediately reports which step your color is closest to on the reference curve and pins it there unchanged, so the value in your brand guide appears verbatim in the output rather than being nudged half a step for the sake of the algorithm.
Name the family and set the anchor
The family name becomes the class prefix — call it brand and you get bg-brand-500, text-brand-700 and the rest. If the automatic anchor puts your color somewhere you did not expect, force it to 500 or 600; forcing changes which steps are lighter and darker than your color but never changes the color itself. The hue drift slider is there for the case where you are matching an existing family that rotates hue between its ends.
Copy the block your Tailwind version wants
Version 4 reads its palette from CSS, so the @theme block with --color-brand-50 through --color-brand-950 goes into the same stylesheet as your @import "tailwindcss". Version 3 reads JavaScript, so take the tailwind.config.js object instead. Either way the eleven hex codes are also available as a plain list for a design tool that does not care about Tailwind at all.
Technical specifications
| Steps generated | 11 — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 |
|---|---|
| Lightness curve | Mean L* of slate, gray, red, amber, green, emerald, blue, indigo and violet at each rung: 97.3, 94.3, 89.1, 81.4, 69.6, 57.5, 47.0, 38.2, 29.7, 23.5, 11.9 |
| Chroma curve | Each rung as a multiple of that family's chroma at 500, averaged over the seven chromatic defaults: 0.09 at 50, 0.84 at 400, 1.00 at 500, 1.04 at 600, 0.43 at 950 |
| Seed handling | Kept byte for byte at its anchor step; the curve is warped around it so the ends still land on L* 97.3 and 11.9 |
| Gamut fitting | 18-iteration binary search on chroma per rung — at Lab hue 297° sRGB holds chroma 93.8 at L* 47 and only 4.7 at L* 97.3 |
| Hue drift | Optional, −60° to +60° measured from step 50 to step 950; Tailwind's own families measure −29° for blue, +50° for amber and −7° for emerald |
| Reconstruction check | Seeded with a default family's own 500, the constant-hue rebuild lands within ΔE 8.0 of every red step and ΔE 13.4 of every emerald step |
| Output and privacy | Tailwind v4 @theme, tailwind.config.js or eleven bare hex codes, all generated in the browser so an unreleased brand color stays local |
Frequently asked questions
Why did my color land on 600 instead of 500?
Because its lightness matched the 600 step more closely than the 500 one. The reference curve puts 500 at L* 57.5 and 600 at L* 47.0, so a color at L* 50 genuinely belongs nearer the 600 rung — anchoring it at 500 would push the whole family lighter than the one you brought. Use the anchor selector to override it when the numbering matters more than the fit, for example when a design system has already documented your color as the 500.
Why doesn't seeding Tailwind's own blue-500 reproduce Tailwind's blue family?
Because Tailwind's families rotate their hue and this generator holds it constant. Measured in Lab, the default blue runs from hue 263° at step 50 to 292° at 950, a 29° rotation, and amber swings 50° the other way; feeding blue-500 back in therefore rebuilds the lightness and chroma faithfully but keeps the 500's hue everywhere, which drifts up to ΔE 28.7 from the real blue-700. Families that barely rotate come back very close — red lands within ΔE 8.0 at every step, median 5.5. The hue drift slider exists precisely so you can put the rotation back when you want it.
What are the 950 steps and do I need one?
950 is the extra-dark rung Tailwind added in v3.3 after dark mode made the gap between 900 and black too wide to work in. It sits far below 900 — the measured jump from 900 to 950 averages 11.6 points of L*, the largest gap anywhere on the ladder — which is why it reads as a near-black surface color rather than as another shade. Skip it if your interface has no dark theme; it costs one line to keep.
Why are my 50 and 100 steps so pale compared with Tailwind's?
Because sRGB simply cannot hold much chroma at L* 97, and the generator tells you when it has clipped. At the Lab hue of indigo, the gamut ceiling is chroma 93.8 at L* 47 but only 4.7 at L* 97.3, so the palest steps have nowhere to put the saturation the curve asks for. Tailwind's own designers worked around this by hand-tuning the hue of their light steps; the honest automatic answer is to sit on the gamut edge and label the step as clipped.
Where does this block go — the config file or the stylesheet?
In Tailwind v4 it goes in your CSS, in v3 it goes in the config file, and the generator will print either. The v4 @theme block defines custom properties that Tailwind turns into utilities, so --color-brand-500 yields bg-brand-500 with no JavaScript involved. The v3 object extends theme.colors and needs a build restart to take effect. Both produce the same class names, which is why a project mid-migration can carry the same palette across.
Which steps are safe to put text on?
Every swatch prints the verdict, and the rule of thumb it confirms is that white text starts working around the 600 step for most hues and black text stops working around 400. The card shows the actual ratio against whichever of white or black clears 4.5:1, or says neither does — that middle band, usually 400 to 500, is the one that catches people out on buttons. Non-text elements such as borders and icons only need 3:1, so they can use a step lighter.
Can I invert the scale for a dark theme?
Not by simply reversing it, because the curve is not symmetric: the top of the ladder spans 3.0 points of L* between 50 and 100 while the bottom spans 11.6 between 900 and 950. Dark interfaces generally want their surfaces built from a separate anchor — take the color you intend as the dark background, generate a second family around it, and use the steps by their measured lightness rather than by mirroring the numbers.
About the 50-950 scale and why the curve matters
A Tailwind number is a position on a ladder, not a lightness. Across the nine default families the 500 step ranges from L* 47.9 in slate to L* 72.2 in amber, a spread of 24 points, because each family is anchored where its hue is most saturated rather than at some agreed brightness. That is worth knowing before you compare two families by number: amber-500 and slate-500 are nothing like each other in lightness, which is why an interface that swaps one palette for another by search-and-replace suddenly fails its contrast checks. What the families do share is the shape of the ladder, and that shape is what this generator reuses.
The shape is uneven on purpose. The measured gaps run 3.0 points from 50 to 100, 11.8 from 300 to 400 and 11.6 from 900 to 950, so the rungs bunch up where interfaces need fine control — the pale surface tints and the deep text colors — and spread out through the middle where a step has to be visibly different from its neighbor. Spacing the eleven steps evenly, which is what most generators do, produces a scale whose 50 and 100 are indistinguishable and whose 500 sits in the wrong place. Chroma has a curve of its own: it peaks at 600 rather than at 500, and at the pale end it collapses to under a tenth of the 500 value, partly by design and partly because sRGB has almost no room for saturation above L* 95.
Two limits are worth stating plainly. Tailwind v4 authored its default palette in OKLCH and some of those colors reach outside sRGB on a wide-gamut display, while this page emits hex and therefore stays inside sRGB — safe everywhere, marginally less vivid on a P3 screen. And a generated family is a starting point, not a design system: the pairing of steps to surfaces, borders and text is a decision, which the scheme generator makes explicitly and the contrast checker verifies pair by pair. If you want the same seed expanded by mixing rather than by lightness targets, the tints and shades table shows what that produces, and the palette generator is the place to go when you need several hues rather than eleven steps of one. For the narrower question of what sits between two rungs — a hover state halfway from 500 to 600 — the mixer will interpolate the pair for you.
Where your brand color is processed
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The seed, the family name and the generated block exist only in this tab's memory, which matters more here than on most pages: a brand color pasted in before launch is exactly the sort of thing that should not appear in a server log somewhere.