Tailwind Color Generator — 50 to 950 Shade Scale

How to use the Tailwind Color Generator

Enter your brand colour as HEX, RGB, HSL or OKLCH.
Give the palette a name (e.g. brand) — it becomes bg-brand-500 and friends.
Keep “closest step” so your exact colour lands on the shade that matches its lightness, or force it to 500.
Pick an export format and copy it into your Tailwind config, CSS or SCSS.

What is a 50–950 colour scale?

Design systems such as Tailwind CSS describe each colour as a ramp of shades: 50 is a near-white tint for backgrounds, 500 is the core colour, and 900–950 are deep shades for text and dark mode. Having the whole ramp lets you style hover and active states, borders, badges and dark themes consistently — instead of eyeballing a lighter or darker version every time.

How this generator builds the scale

Your colour is converted to OKLCH, a perceptually uniform colour space, so each step is an even visual jump.
Each step has a target lightness modelled on Tailwind v4’s palette (≈97% for 50 down to ≈26% for 950). Your colour is placed on the closest step and neighbouring targets shift slightly so the ramp flows through it.
Chroma (colourfulness) peaks around 500–600 and tapers towards both ends, like hand-tuned palettes, so tints don’t look neon and shades don’t look muddy.
Any shade outside the sRGB gamut is gamut-mapped by lowering chroma while keeping hue and lightness.

Using the palette

Tailwind v4 reads colours from CSS: paste the @theme block into your main stylesheet and classes like bg-brand-100 appear. Tailwind v3 uses theme.extend.colors in tailwind.config.js. The CSS variable and SCSS exports work in any project — including Webflow, where you can create matching colour variables in the Variables panel.

Accessibility tips

As a rule of thumb, text on white needs a shade dark enough to reach 4.5:1 (often 600 or darker), and text on dark backgrounds usually works from 300 or lighter. The hint under each swatch tells you; verify specific pairs with the Contrast Checker or the APCA Contrast Checker.

Tools that pair well with the Tailwind Color Generator

Color Mixer — Pick two colours and a number of steps to get evenly blended transition colours — perfect for gradients, borders, charts and hover states.
CSS Variables to Tailwind — Turn your :root colour variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.

Frequently asked questions

Will my exact brand colour appear in the palette?

Yes. It is placed unchanged on the step closest to its lightness (marked ★), or on 500 if you choose that option. The other shades are generated around it.

Why does my colour land on 600 instead of 500?

Because its lightness matches Tailwind’s 600 better. Forcing a dark colour to 500 makes the lighter half of the scale stretch further; choose “Always step 500” if you prefer that.

Does this match Tailwind’s official colours exactly?

No — Tailwind’s palette is hand-tuned. This generator follows the same lightness and chroma pattern so custom colours sit comfortably next to the built-in ones.

Why are Tailwind v4 values in oklch()?

Tailwind v4 defines its default palette in OKLCH, which supports wide-gamut displays and is perceptually uniform. The other export formats use HEX for maximum compatibility.

Tailwind Color Palette Generator (50–950)