Skip to content
PIXELVERSE

Tailwind Color Scale Generator

Give it one brand color and get eleven shades from 50 to 950, spaced evenly in OKLCH, with your color kept exactly. Copy for Tailwind v4, v3 or plain CSS.

Your color

Your exact color is placed at the step whose lightness matches it best, marked below. The other shades are computed around it in OKLCH so each step looks evenly spaced.

Text on each shade

Shade50100200300400500600700800900950
White text1.11.21.41.82.53.24.25.57.59.614.7
Black text19.617.715.011.78.56.55.03.82.82.21.4

Bold values reach 4.5:1, enough for body text.

@theme {
  --color-brand-50: #f0f8fe;
  --color-brand-100: #dceefa;
  --color-brand-200: #bcdff6;
  --color-brand-300: #94c8eb;
  --color-brand-400: #69acd7;
  --color-brand-500: #4c97c5;
  --color-brand-600: #3882ae;
  --color-brand-700: #2e6f95;
  --color-brand-800: #245a79;
  --color-brand-900: #1e4963;
  --color-brand-950: #0b2b3e;
}

How to use the tailwind color scale generator

  1. Enter your brand color and a name, for example brand or primary.
  2. Check where your color landed: it is marked as yours at the step closest to its lightness.
  3. Use the table to see which shades carry white or black text at 4.5:1.
  4. Copy the Tailwind v4 @theme block, the v3 config, or CSS variables.

How the scale is built

Each step has a target lightness in OKLCH, from nearly white at 50 to very dark at 950, following the curve of Tailwind’s default palettes. Chroma peaks around 500 and 600 and falls off towards both ends, because very light and very dark colors cannot hold much saturation inside sRGB. Your color is placed at the closest step without any change, and its neighbours are nudged so the transition stays smooth.

Using the shades

  • 50–100 for page and card backgrounds, 200–300 for borders and hovers.
  • 500–600 for buttons and links; check white text contrast in the table.
  • 700–950 for text on light backgrounds and for dark mode surfaces.

In Tailwind v4, paste the @theme block into your main CSS file and use classes like bg-brand-500 immediately. For gradients between your shades, take them into the gradient generator from the Color Shelf.

Questions

Will my exact brand color be in the scale?

Yes. It is placed unchanged at the step whose lightness is closest, and marked 'yours'.

Does this work with Tailwind v3?

Yes. Switch the output to 'Tailwind v3' to get a theme.extend.colors block for tailwind.config.js.

Why OKLCH instead of mixing with white and black?

Mixing with white makes tints chalky and mixing with black makes shades muddy. Stepping lightness in OKLCH keeps the hue consistent across the whole scale.