Which step does my base color become?

Your chosen color is anchored at step 500, the middle of the scale. Lighter steps (50 to 400) and darker steps (600 to 950) are generated around it by adjusting lightness while preserving your hue.

How are the lighter and darker shades calculated?

The base color is converted to HSL. Each step keeps the hue and maps to a fixed target lightness ramp from 97 percent at step 50 down to 13 percent at step 950. Saturation is nudged slightly up for dark steps and down for light steps for a natural feel.

Where do I paste the output?

Put the generated object inside theme.extend.colors in your tailwind.config.js. You can then use utility classes like bg-brand-500 or text-brand-200 anywhere in your markup.

Why use a full 50 to 950 scale instead of one color?

A full scale gives you consistent hover, border, background, and text variants of the same hue. It is the convention Tailwind's own palette follows, so your custom color behaves like the built-in ones.

Does it accept short hex codes?

Yes. Both 3-digit codes like #39f and 6-digit codes like #3b82f6 are accepted. Three-digit values are expanded to six internally before the scale is built.

Tailwind Color Config Generator

The Tailwind Color Config Generator turns one base color into a complete 50 to 950 shade scale and hands you the exact tailwind.config.js object to paste in. It keeps your hue intact and anchors your color at step 500, matching the convention of Tailwind’s built-in palettes.

How it works

The base hex is converted to HSL. The hue is held constant across all eleven steps; only lightness and a small saturation tweak change:

steps        = [50,100,200,300,400,500,600,700,800,900,950]
target L (%) = [97,94,86,76,64,52,44,36,28,20,13]
saturation   = baseS + (stepIndex − 5) × 2   // darker = a touch more saturated
hex(step)    = hslToHex(baseHue, saturation, target L)

Because step 500 maps near your base lightness, the color you pick lands in the middle of the ramp and the rest fan out symmetrically lighter and darker.

Tips and notes

Pick a mid-tone for your base — something around 45 to 60 percent lightness works best, since extremely light or dark inputs leave little room on one side of the ramp. After pasting into theme.extend.colors, you immediately get classes such as bg-brand-50, border-brand-300, and text-brand-900. The live swatch row above the code lets you sanity-check contrast before you commit the scale.