Which Tailwind stops does it generate?

It generates the standard eleven stops — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 — by holding hue and saturation and sweeping lightness.

Will it match Tailwind's built-in palettes exactly?

No. The lightness steps approximate Tailwind's default ramp so any base colour looks balanced, but it is generated from your colour rather than copied from a named palette.

Is my colour uploaded anywhere?

No. The whole ramp is computed locally in your browser and nothing leaves your device.

How are the lighter and darker shades calculated?

The tool converts your base colour to HSL, then keeps its hue and saturation fixed while replacing the lightness with a fixed target per stop — roughly 97% at 50, 56% at 500 and 18% at 950. This keeps every shade in the same colour family.

Where do I paste the generated config?

Drop the block inside theme.extend.colors in your tailwind.config.js or tailwind.config.ts. After that you can use classes like bg-brand-500, text-brand-700 and border-brand-200.

My brand colour does not land on the 500 stop — why?

Each stop has a fixed target lightness, so the tool rebuilds your colour at the 500 lightness (around 56%) rather than placing your exact hex there. If your base is much lighter or darker, the closest match may be a different stop; adjust the base until 500 looks right.

Does it support Tailwind v3 and v4?

Yes. The output is a plain object of hex values under a colour name, which works in the theme.extend.colors block of both Tailwind v3 (JS/TS config) and v4 setups that still use a config file.

Tailwind Shade Generator

Tailwind shade generator

This tool turns a single base colour into the complete Tailwind-style 50 → 950 ramp and emits a paste-ready theme.extend.colors block. It is for developers adding a custom brand colour to a Tailwind project who want a balanced, on-brand set of shades without picking eleven hexes by hand.

How it works

The generator converts your base colour to HSL, then builds each of the eleven standard stops by holding the hue and saturation constant and replacing the lightness with a fixed target value per stop. The targets descend from light to dark — roughly 97% at the 50 stop down to 18% at 950, with 500 around 56% — so every shade stays in the same colour family while spanning tints and shades. Each resulting HSL colour is converted back to hex and written under the name you choose.

Example

Naming the colour brand produces a block like this (values depend on your base colour):

theme: {
  extend: {
    colors: {
      brand: {
        50: "#eff6ff",
        500: "#3b82f6",
        950: "#172554",
        // …200, 300, 400, 600, 700, 800, 900
      },
    },
  },
}

Paste it into tailwind.config, then use classes such as bg-brand-500 and text-brand-700.

Stop	Target lightness
50	~97%
100	~94%
500	~56%
700	~40%
950	~18%

Everything runs in your browser — nothing is uploaded.