EnglishEN

Color Scale Generator for Tailwind CSS (50–950 Palette)

Choose a base color and a name to get every shade from 50 to 950 with ready-to-paste config.

Your text and files never leave your browser — nothing is sent to a server.

Click a swatch to copy its HEX. The ratio is the contrast of whichever text color, white or black, reads better on it.

Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
Preview
Saved. Your changes are live now.
Get startedLearn moreNew

How to use

  1. Pick a base color or type a HEX code, and choose the name you will use in class names, such as brand.
  2. Steps from 50 (lightest) to 950 (darkest) are spaced by OKLCH lightness. With “Keep my color at the closest step” on, your exact color appears in the palette.
  3. For v4, paste the @theme block into your CSS. For v3, paste the colors section into tailwind.config.js. Then use classes like bg-brand-500.
  4. Check the preview to see the palette on a button, a badge and an alert box.

FAQ

Why compute the palette in OKLCH?

OKLCH is based on perceived lightness, so the steps look evenly spaced and colors like yellow and blue don’t jump around in brightness. Tailwind v4’s default colors are written in oklch() too.

Will it match Tailwind’s built-in colors?

No. The tool uses its own lightness and chroma curves, so values differ from the official palette. It is meant for quickly building a similar scale from your own brand color.

What happens to colors the screen can’t display?

Lightness and hue are kept and only the chroma is reduced until the color fits in sRGB. Very saturated colors may look a little calmer at some steps.

Tailwind CSS is a trademark of Tailwind Labs Inc. This tool is not affiliated with or endorsed by Tailwind Labs.

Related tools

Color PickerHEX, RGB, HSL and CMYK in one placeContrast CheckerContrast ratio with AA and AAA resultsCSS GradientLinear, radial and conic gradientsASCII Art GeneratorText and photos as character art

All tools