Why does Tailwind go to 950 when Material stops at 900?

Tailwind added 950 in v3.3 because dark mode needed a step darker than 900 for backgrounds. Material's scale predates widespread dark mode.

Will my brand colour land exactly on 500?

Only if its lightness is already around 56%. The scale is built at fixed lightness targets so the ramp is even, which means a very light or very dark brand colour sits nearer 300 or 800. That's usually what you want — an uneven scale is worse than an offset one.

Tailwind Color Generator

Generate a Tailwind-style colour scale from one brand colour, formatted exactly as your config expects. The scale runs 50 through 950 — matching Tailwind 3 and 4 — holding hue and saturation while stepping lightness, so `brand-100` and `brand-900` read as the same colour at different weights.

Base colour

Colour name

brand-500

#7631EC

#F6F1FE

100

#ECE3FC

200

#D3BEF9

300

#B894F5

400

#9560F0

500

#7631EC

600

#6014E0

700

#5011BB

800

#420E9A

900

#340B79

950

#20074B

brand: {
  50: "#F6F1FE",
  100: "#ECE3FC",
  200: "#D3BEF9",
  300: "#B894F5",
  400: "#9560F0",
  500: "#7631EC",
  600: "#6014E0",
  700: "#5011BB",
  800: "#420E9A",
  900: "#340B79",
  950: "#20074B",
}

Paste this into `theme.extend.colors` in your Tailwind config, or into an `@theme` block if you're on Tailwind 4.

Nothing is uploaded — this tool runs inside your browser, so your files never leave your device.

Help us improve

Why use this tool

Full 50–950 scale, matching Tailwind 3 and 4
Output formatted as a config block with your own colour name
Every step shown as a swatch
Works with `theme.extend.colors` or a Tailwind 4 `@theme` block

How it works

1Enter your brand colour and what you want it called.
2Check the ramp looks even across all eleven steps.
3Paste the block into your Tailwind config.

Tailwind Color Generator — frequently asked questions

Into `theme.extend.colors` in `tailwind.config.js` on Tailwind 3. On Tailwind 4 the config moved into CSS, so use an `@theme` block and declare the steps as custom properties instead.

More colour tools

Color Converter HEX → RGB RGB → HEX HEX → HSL CMYK Contrast

Looking for something else? Browse all colour tools

Explore the other tools

Same deal everywhere on the site — free, no sign-up, and no watermark on anything you download.

QR Code Tools Barcode Tools PDF Tools Image Tools Developer Tools SEO Tools Text Tools Calculators Unit Converters File Tools Business Tools AI Tools Utilities

Or see every tool on one page.