Skip to tool content
Toolioz logoToolioz

Tailwind Color Generator

A Tailwind color generator builds 50–950 shades in OKLCH from a seed hex and prints Tailwind v4 @theme tokens. Lightness steps follow a 50–950 ramp. Chroma is reduced at the ends so 50 and 950 stay readable. v3 config objects are not emitted because the export syntax changed.

Quick Summary & Direct Answer
DevTools

How are Tailwind 50–950 shades built?

The seed hex is converted to OKLCH. Hue is held. Lightness walks a fixed ramp from about 0.97 to 0.21. Each stop is converted back to hex and to an oklch() CSS colour. @theme maps --color-name-500 and neighbours.

Key Takeaways

  • OKLCH, not HSL, so chroma stays even.
  • v4 @theme is the export. v3 JS config is omitted on purpose.
  • 500 is not guaranteed to equal the seed; the ramp owns lightness.
@theme {
  --color-brand-50: oklch(0.97 0.089 237.32);
  --color-brand-100: oklch(0.93 0.126 237.32);
  --color-brand-200: oklch(0.88 0.148 237.32);
  --color-brand-300: oklch(0.8 0.148 237.32);
  --color-brand-400: oklch(0.71 0.148 237.32);
  --color-brand-500: oklch(0.62 0.148 237.32);
  --color-brand-600: oklch(0.53 0.148 237.32);
  --color-brand-700: oklch(0.44 0.148 237.32);
  --color-brand-800: oklch(0.37 0.148 237.32);
  --color-brand-900: oklch(0.29 0.104 237.32);
  --color-brand-950: oklch(0.21 0.104 237.32);
}
50#bcffff
100#91f4ff
200#6ae5ff
300#4ccaff
400#22adf2
500#0091d3
600#0075b6
700#005999
800#004582
900#002f57
950#001a41

Results can be wrong. This calculator is unofficial. Figures can be incomplete, rounded, or not updated. Use them at your own risk and check a tape, datasheet, ball band, or official chart before cutting, mixing, buying, or publishing. Limits of liability are in the terms of service.

Frequently asked questions

The export is @theme { --color-* } which v4 reads. v3 module.exports palettes are not written.

Explore Related Tools

CSS Clamp Generator

Builds clamp() fluid type and spacing, with a modular type-scale tab.

Try tool

PX to REM Converter

Converts pixels to rem and em at a chosen root font size, with a common-size table.

Try tool

Color Format Suite

Convert seamlessly between HEX, RGB, HSL and CMYK color codes with palette generation.

Try tool

Publisher notes · reviewed 29 October 2026

Shades are an OKLCH lightness ramp

Hue comes from the seed. Lightness walks 50–950. Export is Tailwind v4 @theme custom properties. v3 JS palettes are omitted because that syntax already changed once.

Why 500 is not the seed

Stop 500 uses a fixed lightness near 0.62 so the ramp stays even. The seed donates hue and chroma.

Worked examples

  • Seed #0ea5e9

    A cyan scale with oklch() tokens named --color-brand-*.

Limits of this page

  • P3 gamut clipping is not separately flagged.
  • If Tailwind changes @theme again, edit the copied CSS.

Sources