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.

What is the Tailwind Color Config Generator?

Generates a complete Tailwind CSS color scale of 50 to 950 shades from a single base color, anchored at step 500. Outputs a ready-to-paste tailwind.config.js color object. Runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Tailwind Color Config Generator

Name: Tailwind Color Config Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Why a full 50–950 scale?

Tailwind’s design philosophy is to ship a complete utility set — one class per shade, all accessible from the markup without writing custom CSS. For that to work with a custom brand color, you need the full ramp. Without it, you are constantly writing bg-brand-500 but then falling back to raw hex values or bg-[#xxx] JIT escapes for the lighter and darker variants, which defeats the consistency goal.

A full scale gives you:

Light backgrounds: bg-brand-50 or bg-brand-100 for tinted page sections, form field backgrounds, and hover states.
Borders and dividers: border-brand-200 or border-brand-300 for subtle structure without heavy contrast.
Primary surfaces: bg-brand-500 or bg-brand-600 for buttons and interactive elements.
Dark accents: bg-brand-800 and text-brand-900 for dark-mode surfaces and emphasis.

Having all eleven steps available means every designer and developer on the team pulls from the same named palette rather than inventing ad hoc variations.

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 = slightly more saturated
hex(step)    = hslToHex(baseHue, saturation, target L)

The saturation nudge is intentional: colors that get very light (step 50) tend to look washed out at full saturation, while very dark shades benefit from slightly richer chroma. The small per-step adjustment keeps the ramp perceptually balanced.

Where to paste the output

Put the generated block inside theme.extend.colors in your tailwind.config.js or tailwind.config.ts:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#f0f9ff",
          // …other steps…
          500: "#0ea5e9",
          950: "#082f49",
        },
      },
    },
  },
};

After saving, all classes in the brand-* namespace become available: bg-brand-50, text-brand-700, border-brand-200, ring-brand-500, and so on.

Practical tips

Pick a mid-tone base. A color around 45–60% lightness in HSL gives the ramp the most room on both sides. A very light base color (lightness 85%) leaves almost no range for the lighter steps; a very dark base (lightness 15%) compresses the dark end.
Check contrast on the live swatches before committing the scale. Run the WCAG contrast check between brand-50 and brand-900 to confirm your lightest and darkest steps have adequate contrast for text overlaid on backgrounds.
Name the key descriptively. A key called brand works for one-color designs; if you have a primary action color and a secondary accent, name them primary and accent so the classes communicate intent in the markup.