How accurate is the generated scale?

It applies Tailwind-style lightness and saturation targets to your hue, which produces a balanced, native-looking scale. Fine-tune individual steps if your brand needs exact values.

How do I use it in my project?

Copy the tailwind.config.js block and merge it under theme.extend.colors, then use classes like bg-brand-500 or text-brand-700.

Tailwind Color Generator

Turn one base color into an 11-step Tailwind scale — 50 through 950 — with CSS variables and a ready-to-paste tailwind.config colors block.

Base color

Scale name (for the config export)

Steps are derived from your hue at Tailwind-style lightness levels. Fine-tune individual steps in your project if a brand needs exact values. See Tailwind’s official color docs.

CSS variables

:root {
  --50: #f3f3fc;
  --100: #dedff7;
  --200: #bdbef9;
  --300: #9395f6;
  --400: #696bf2;
  --500: #3f42ee;
  --600: #1418eb;
  --700: #1114c0;
  --800: #0d109b;
  --900: #12136e;
  --950: #0c0d4b;
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {
colors: {
  brand: {
    50: '#f3f3fc',
    100: '#dedff7',
    200: '#bdbef9',
    300: '#9395f6',
    400: '#696bf2',
    500: '#3f42ee',
    600: '#1418eb',
    700: '#1114c0',
    800: '#0d109b',
    900: '#12136e',
    950: '#0c0d4b',
  },
},
    },
  },
};

Tailwind ships every color as an 11-step scale (50–950) so your buttons, text, borders and hover states always have a matching shade. This generator rebuilds that structure around any brand or base color you choose.

Tailwind CSS color documentation

Frequently asked questions

The full scale is 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 — 11 shades from very light to very dark.

Must-know facts

The 500 step sits at the middle of every Tailwind scale.
Scales copy as CSS variables too — handy for plain CSS projects.

Related tools

These color tools pair naturally with the one you just used — keep exploring.

Palette GeneratorCreate harmonious palettes with lock and export.Color ChartsExplore Tailwind, Material and web-safe reference charts.Color PickerPick, fine-tune and copy any color in HEX, RGB or HSL.