Tailwind color palette generator.

Enter one color and get a Tailwind-style scale of 11 shades, from 50 to 950, computed in OKLCH the way Tailwind v4’s own palette is. Your color stays exactly as you entered it, on the step nearest its lightness. It runs in your browser, so nothing you enter is uploaded.

ColorColor name

Your color is step 500.

50#F1F6FD
100#E0EBFB
200#C6DAFA
300#9EC2FB
400#659FFD
500#3B82F6
600#2873EA
700#215FC3
800#1E50A0
900#1F4482
950#0C2246

@theme {
  --color-brand-50: oklch(0.971 0.011 256.695);
  --color-brand-100: oklch(0.937 0.025 257.646);
  --color-brand-200: oklch(0.884 0.049 259.79);
  --color-brand-300: oklch(0.809 0.09 259.44);
  --color-brand-400: oklch(0.705 0.151 259.626);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.578 0.195 259.687);
  --color-brand-700: oklch(0.505 0.169 259.846);
  --color-brand-800: oklch(0.445 0.141 259.626);
  --color-brand-900: oklch(0.395 0.113 260.11);
  --color-brand-950: oklch(0.257 0.073 259.785);
}

Runs in your browser. Nothing you add here is uploaded or stored.

How to make a Tailwind color scale

Enter your color. Pick it with the swatch, or type it as HEX, rgb(), hsl() or oklch(). It starts at #3B82F6.
Name the scale. The name becomes part of every variable, as in --color-brand-500, and starts as brand. It’s lowercased, and anything other than letters, numbers and hyphens becomes a hyphen.
Read the scale. Eleven swatches run from 50, the lightest, to 950, the darkest, each with its HEX code and a copy button. Your color is outlined, and the page tells you which step it is, such as “Your color is step 500.”
Copy the code. The Tailwind v4 @theme tab and the CSS variables tab both list --color-<name>-<step> for all 11 steps as oklch() values, the first inside @theme, the second inside :root.

How the scale is built

Lightness follows the curve of Tailwind v4’s own palette, taken from its red scale: about 0.97 at step 50, 0.64 at 500 and 0.26 at 950.
Chroma, how vivid the color is, follows that same scale’s curve, which peaks at 600, and is scaled to your color’s chroma.
Hue stays your color’s hue at every step.
Your color sits unchanged on the step closest to its own lightness. For the default #3B82F6 that is step 500.
Steps sRGB can’t show are brought back into range by lowering their chroma, so every HEX code on the swatches is a color a screen can display.

Use it in Tailwind and Codex

In a Tailwind v4 project, paste the @theme block into the CSS file that contains @import "tailwindcss". Every --color-brand-* variable becomes classes: bg-brand-500, text-brand-700, border-brand-200 and so on.

A common way to split the steps: 50 to 200 for tints and backgrounds, 500 to 600 for buttons and links, 700 to 900 for text on light backgrounds, and 950 for the darkest text. Which step is dark enough to hold white text depends on the hue, so check each pair in the contrast checker.

To have Codex use the scale everywhere, and to keep it from drifting, give it the block and the rules:

Add the scale

Add this scale to the global CSS file of our Tailwind v4 project, inside the existing @theme block if there is one: [paste the @theme block]. Use brand-600 for primary buttons and links, brand-700 on hover, brand-50 for tinted backgrounds and brand-950 for the darkest text. Don't add any other brand colors, and check that text on each of these pairings reaches at least 4.5:1 contrast. Then record in DESIGN.md which step is used for what.

Frequently asked questions

Is it free?

Yes. It’s free, with no sign-up and no limit on how many scales you make.

Are my colors uploaded?

No. The scale is made in your browser and isn’t sent or stored anywhere. The site only counts that the tool was used, never the colors.

Will it match Tailwind’s built-in colors?

Not exactly. It applies the lightness curve of Tailwind v4’s red scale to every hue, so the steps are evenly spaced and feel familiar, but Tailwind tunes each of its own colors separately. A generated blue will be close in spirit to Tailwind’s blue, not identical.

Does it work with Tailwind v3?

The @theme tab is for Tailwind v4. For v3, copy the HEX codes from the swatches into the colors section of tailwind.config, under a name such as brand, with the step numbers as keys.