How is the scale built?

It keeps your colour's hue and saturation and steps the lightness across the 11 Tailwind stops, from a very light 50 to a very dark 950. The result mirrors how Tailwind's own palettes are structured.

How do I use the output?

Copy the config block and drop it into the colors section of your tailwind.config.js under a name of your choice, then use classes like bg-brand-500 or text-brand-700.

Is anything uploaded?

No. The scale and config are generated in your browser. Click any swatch to copy its HEX.

Tailwind Color Generator

Generate a Tailwind-style 50–950 shade scale from any base colour. Runs entirely in your browser.

Base colour#15803d

Colour name

tailwind.config.js

'brand': {
  '50': '#f2fdf6',
  '100': '#e5fbed',
  '200': '#c2f5d4',
  '300': '#9aefb9',
  '400': '#6ae798',
  '500': '#3adf76',
  '600': '#22ce61',
  '700': '#1cab50',
  '800': '#178c42',
  '900': '#137236',
  '950': '#0b4621',
}

Processed on your device. This file is never uploaded.

1Pick a base colour and name it.
2Review the 11-step scale.
3Copy the config into tailwind.config.js.

A full Tailwind scale from one colour

Tailwind expects each colour as an 11-step scale from 50 to 950, and hand-picking all eleven is tedious. Give this tool a base colour and it generates the whole scale by holding the hue and saturation and stepping the lightness, then hands you a config block ready to paste.

Copy and go

Name the colour, copy the generated object into your Tailwind config, and the usual utility classes work against it. Every swatch also copies its HEX with a click. It all runs on your device.

Frequently asked questions

Tailwind Color Generator

A full Tailwind scale from one colour

Copy and go

Frequently asked questions

What next?