◐ Web & Design

Tailwind Color Shade Generator (50–950)

Turn one brand color into a Tailwind 50–950 scale in OKLCH, with contrast against white and black, as Tailwind v4 @theme, v3 config, CSS variables, SCSS or JSON.

OKLCH, in sRGB gamut Tailwind v4 & v3 Contrast per shade Keeps your exact color

Loading Tailwind Shades…

What this page sends

Your input: Processed in this tab and not sent to a server.
Page load: Loading the page requests HTML, scripts and images from ByteKiln, fonts from Google Fonts, and sends Google Analytics page views, tool-usage events and catalog interactions (tool/category IDs, result status and whether a click followed search — never your input, output or search terms). Privacy & sharing

How the Tailwind Color Shade Generator (50–950) Works

Design systems start with one brand color, and Tailwind wants eleven: 50 through 950. Picking the other ten by eye in HSL gives muddy darks, washed-out lights and steps that look uneven, because HSL lightness doesn't match how bright colors actually look. This generator builds the scale in OKLCH, the perceptual color space Tailwind v4 uses for its own palette. It keeps your hue, follows a lightness curve and a chroma taper measured from Tailwind v4's seventeen chromatic palettes (and the neutral palette for grays), places your color at the closest step — or at 500 if you pin it — and gamut-maps every shade into sRGB so nothing clips. Each swatch shows its hex value and its contrast ratio with white and black text. Export as a Tailwind v4 @theme block with oklch() values, a Tailwind v3 config object, plain CSS custom properties, SCSS variables and map, or JSON. Tests check that lightness always decreases from 50 to 950, that every shade is in gamut, and that a pinned color comes back exactly.

Lightness and chroma curves

The target lightness for each step is the median of Tailwind v4's chromatic palettes (50 ≈ 0.977 … 950 ≈ 0.279 in OKLCH). The curve is stretched so your color lands exactly at its step and the ends stay put. Chroma follows the median taper relative to the 500 shade — about 8% at 50, peaking around 500–600, and 39% at 950 — so light tints aren't neon and darks don't go muddy.

Gamut mapping

High-chroma shades at the light and dark ends often fall outside sRGB. Each shade is mapped with the CSS Color 4 algorithm, which lowers chroma while keeping lightness and hue, so the scale stays monotonic and every hex value is displayable.

Grays and edge cases

Colors with almost no chroma follow Tailwind's neutral lightness curve and get no added hue. Very light or very dark inputs still produce eleven shades with decreasing lightness; if neighbours become nearly indistinguishable (ΔE OK below 0.02), the tool warns you. An optional hue shift rotates hue slightly toward the dark end, as Tailwind's own blues do.

Output formats

Tailwind v4: --color-name-step variables in @theme, with oklch() or hex values. Tailwind v3: a colors object with hex values and DEFAULT. CSS: custom properties on :root. SCSS: one variable per shade plus a map. JSON: step → hex. Names are normalized to kebab-case ("Brand Blue" → brand-blue).

Limitations

The scale is algorithmic: it follows the median lightness and chroma curves of Tailwind's palette, but it isn't Tailwind's hand-tuned color, and designers may still adjust individual steps.
Your input color is placed at the step with the closest lightness, so it may land on 400 or 600 rather than 500.
Contrast is shown against white and black only.
Very saturated inputs are gamut-mapped into sRGB, so the lightest and darkest shades can be less vivid than the input.

FAQ

Short answers for the things developers usually ask before trusting a tool.

Is my color uploaded?

No. The scale is computed in your browser with OKLCH math; the color is not sent to a server.

How do I add the colors to Tailwind v4?

Paste the @theme block into your main CSS file after @import "tailwindcss". Tailwind v4 reads --color-brand-500 and friends from @theme and generates bg-brand-500, text-brand-700 and the rest automatically. The values are oklch() like Tailwind's own palette; switch to hex if you need to support very old browsers.

And for Tailwind v3?

Use the v3 output: a colors object for theme.extend.colors in tailwind.config.js, with hex values and a DEFAULT set to your input so plain bg-brand works too.

Why is my color the 600 (or 400) shade and not 500?

By default your color is placed at the step whose lightness it's closest to, based on Tailwind v4's own palettes, so the scale around it stays evenly spaced. A dark brand color becomes 600 or 700; a pastel becomes 200. If your design system requires the brand color to be 500, choose "As 500" — the rest of the scale is stretched around it.

Why OKLCH instead of HSL?

OKLCH lightness matches perceived lightness, so a blue and a yellow at the same L look equally light — HSL's 50% lightness is dark for blue and glaring for yellow. Stepping lightness in OKLCH gives even-looking scales for every hue, which is why Tailwind v4 switched its default palette to OKLCH.

Will the shades be accessible?

Each swatch shows its WCAG contrast ratio with white and black text. As a rule of thumb, text on 50–300 should be dark and text on 600–950 light, but check the numbers: 4.5:1 or more is needed for body text (WCAG AA). The contrast checker can test specific pairs.

Related tools

Useful follow-ups when one conversion usually turns into three more.

web-design