BYTETOOLS

Tailwind Color Scale Generator

Turn one brand colour into a full 50-950 Tailwind scale in OKLCH, with contrast against white and black for every step and copy-ready @theme output.

Brand colour

The scale

50#f2f7ffL 98% · C 0.012on white 1.1:1 · on black 19.5:1
100#e3eeffL 95% · C 0.026on white 1.2:1 · on black 17.9:1
200#cbdfffL 90% · C 0.049on white 1.4:1 · on black 15.5:1
300#a6c8ffL 83% · C 0.086on white 1.7:1 · on black 12.3:1
400#6ea5ffL 72% · C 0.144on white 2.5:1 · on black 8.5:1
500#3b82f6L 62% · C 0.188on white 3.7:1 · on black 5.7:1your colour
600#1967dfL 54% · C 0.198on white 5.2:1 · on black 4.0:1
700#0653c1L 47% · C 0.186on white 7.0:1 · on black 3.0:1
800#04419bL 40% · C 0.157on white 9.4:1 · on black 2.2:1
900#08357bL 35% · C 0.129on white 11.6:1 · on black 1.8:1
950#031d49L 24% · C 0.089on white 16.5:1 · on black 1.3:1

Your colour was placed at step 500 because that is where its OKLCH lightness sits. Hue is held at 259.8° across every step; lightness follows Tailwind’s own ramp and chroma tapers at both ends so the lightest and darkest steps do not look neon.

Text safety at a glance

StepAs background, white textAs background, black text
501.08:1 too low19.52:1 AA
1001.17:1 too low17.94:1 AA
2001.35:1 too low15.54:1 AA
3001.70:1 too low12.33:1 AA
4002.47:1 too low8.49:1 AA
5003.68:1 large text only5.71:1 AA
6005.19:1 AA4.05:1 large text only
7006.96:1 AA3.02:1 large text only
8009.40:1 AA2.23:1 too low
90011.63:1 AA1.81:1 too low
95016.46:1 AA1.28:1 too low

Copy into your project

@theme {
  --color-brand-50: oklch(97.47% 0.0119 259.82);
  --color-brand-100: oklch(94.59% 0.0258 259.05);
  --color-brand-200: oklch(89.9% 0.0491 259.79);
  --color-brand-300: oklch(82.76% 0.0861 259.9);
  --color-brand-400: oklch(72.29% 0.1442 259.82);
  --color-brand-500: oklch(62.31% 0.188 259.81);
  --color-brand-600: oklch(54.18% 0.1974 259.72);
  --color-brand-700: oklch(47.33% 0.1852 259.74);
  --color-brand-800: oklch(40.21% 0.1577 259.83);
  --color-brand-900: oklch(34.79% 0.1283 259.86);
  --color-brand-950: oklch(24.32% 0.0884 259.75);
}

What is the Tailwind Color Scale Generator?

Tailwind expects eleven steps per colour, from 50 through to 950, and hand-mixing them usually produces a ramp that drifts in hue and goes muddy at the ends.

  • Full 50-950 ramp generated from one brand colour
  • Your exact hex is preserved at its natural step
  • Hue held constant with chroma tapered at both ends
  • WCAG contrast against white and black for every step
  • Tailwind v4 @theme, tailwind.config.js and plain CSS output
  • Name sanitising so the tokens are always valid

How to use the Tailwind Color Scale Generator

  1. 1

    Enter your brand colour as a hex value or pick it with the swatch.

  2. 2

    Give the scale a name — it becomes the token name in the generated code.

  3. 3

    Check which step your colour anchored to and how each step scores against white and black.

  4. 4

    Choose an output format and copy the block straight into your project.

About the Tailwind Color Scale Generator

Tailwind expects eleven steps per colour, from 50 through to 950, and hand-mixing them usually produces a ramp that drifts in hue and goes muddy at the ends. This generator holds your colour's OKLCH hue fixed and steps lightness along the same curve Tailwind's own palettes follow, tapering chroma at both ends so the lightest and darkest steps stay believable.

Your colour is not moved. It is placed at whichever step its lightness naturally belongs to — a mid-tone lands on 500, a pale tint might anchor at 100 — and the rest of the ramp is built around it, so the hex you typed appears verbatim in the output.

Every step is scored for WCAG contrast against both white and black, which is the information you actually need when deciding which step can carry text. Output is available as a Tailwind v4 @theme block in oklch or hex, a tailwind.config.js colours object, or plain CSS custom properties. It all runs locally in your browser.

Frequently asked questions

How does Tailwind number its color shades?

From 50 (lightest) through 100 to 900 in hundreds, plus 950 as an extra dark step added in v3.3. Lower numbers are lighter. 500 is conventionally the base shade, which is why most brand colours end up anchored there.

Why does Tailwind v4 use oklch() for colors?

Because OKLCH lightness is perceptual, a ramp built by stepping lightness produces evenly spaced shades across every hue. In HSL the same steps would make yellows look washed out and blues look too dark. It also lets Tailwind reach colours outside sRGB on wide-gamut displays.

Will this exactly reproduce Tailwind's built-in palettes?

No, and it does not try to. Tailwind hand-tunes hue slightly at individual steps for aesthetic reasons. This generator produces a mathematically even ramp on a single hue, which is usually what you want for a brand colour that has no hand-tuned reference.

Which shade should I use for body text?

Check the contrast column rather than guessing. On a white background you typically need step 600 or darker to clear 4.5:1; on a dark background, step 300 or lighter. The exact cut-off moves with hue, which is why the table shows it per step.

What if my brand color is very light or very dark?

It anchors near the appropriate end of the ramp instead of at 500, and the rest of the scale is built around it. A very pale colour might land at step 100, which means the darker steps are extrapolated — worth eyeballing before you commit.

Related tools