Which step should my brand colour be?

Wherever its lightness naturally lands. Saturated blues, purples and reds usually sit at 500 or 600. Yellows, limes and cyans are naturally light, so they belong at 300 or 400. Forcing a light colour to 500 drags every darker step into mud. Anchoring puts your exact hex at its nearest step and bends the curve through it.

Why build the scale in OKLCH instead of HSL?

HSL lightness is not how bright a colour looks. Pure yellow and pure blue both have 50% lightness in HSL, yet yellow against white has a contrast of about 1.07:1 and blue about 8.6:1. OKLCH lightness tracks perceived brightness, so the same step looks equally light across hues and contrast becomes predictable. That is why Tailwind v4 moved its palette to OKLCH.

Which shades pass WCAG contrast?

For most hues, white text reaches AA (4.5:1) from about 600 down, and black text passes on 400 and lighter. Yellow, lime and cyan shift a step or two lighter. Each swatch shows the exact result: AA means 4.5:1 or more for body text, otherwise you see the ratio. Note that 500 in most blues, reds and purples sits around 3.5–4.5:1 on white, often short of AA for body copy.

How do I use the scale in Tailwind v4?

Paste the @theme block into your main CSS file after @import "tailwindcss". Every utility then works with your name: bg-brand-500, text-brand-700, border-brand-200, ring-brand-400, and opacity modifiers like bg-brand-500/20. For Tailwind v3, copy the config tab into theme.extend.colors in tailwind.config.js.

Do all browsers understand oklch()?

Every current browser does: Chrome and Edge 111+, Safari 15.4+ and Firefox 113+. Tailwind v4 itself targets Safari 16.4+, Chrome 111+ and Firefox 128+, so OKLCH adds no new requirement. If you must support older browsers, use the CSS variables tab, which exports hex.

Is my colour sent anywhere?

No. The maths runs in your browser. Your settings live only in the page URL, so you can bookmark or share the exact scale.

Tailwind color scale generator

Turn one hex into a full 50–950 Tailwind scale, built in OKLCH on a curve modelled on Tailwind v4's own palettes. Keep your exact brand colour, check contrast on every step, and export to Tailwind v4, v3, CSS, SCSS or design tokens.

Free, no signup
Runs in your browser
Nothing is uploaded

Your scale

Click any swatch to copy its hex. Your colour sits at brand-600.

Base colour

Token name

Try a colour

Tune

Shape the curve. Everything updates live.

Hue shift, light → dark0°

Rotates the hue across the scale, pivoting on your colour. Tailwind's own blue drifts about +13° towards indigo as it darkens.

Chroma (saturation)100%

100% matches your colour. Lower for a muted, grown-up palette; higher for punch.

Anchor my colour#266DF0 stays exact at brand-600; the curve bends through it.

In use

The scale on real interface parts.

NewBeta

Ship the redesign this week

Body copy on the 50 tint uses 800 — comfortably above AA. A text link

Progress68%

PrimarySecondary

Heads up

Alerts use 50, 200 and 800–900.

Dark surface

950 background, 50 and 300 text.

Action

Export

Paste into your project. Tailwind v4 uses OKLCH; the others use hex.

Tailwind v4

@theme {
  --color-brand-50: oklch(96.9% 0.012 264.51);
  --color-brand-100: oklch(94.1% 0.022 260.72);
  --color-brand-200: oklch(89.1% 0.045 261.86);
  --color-brand-300: oklch(81.4% 0.087 261.44);
  --color-brand-400: oklch(70.8% 0.149 261.44);
  --color-brand-500: oklch(63.2% 0.194 261.37);
  --color-brand-600: oklch(57% 0.21 261.37);
  --color-brand-700: oklch(50.5% 0.198 261.42);
  --color-brand-800: oklch(44.2% 0.165 261.49);
  --color-brand-900: oklch(38.9% 0.13 261.48);
  --color-brand-950: oklch(27.7% 0.091 261.53);
}

/* Use it: bg-brand-500, text-brand-700, border-brand-200 */

How it works

How to use the tailwind color scale generator

Enter your colour

Type a hex, use the picker or start from a preset, then name the token: brand, primary, accent or anything you like.

Read the scale

Eleven shades from 50 to 950 appear instantly, each with its hex and an AA check against white and black. Your colour is anchored at its natural step.

Tune the curve

Rotate the hue across the scale, raise or lower the chroma, or switch off anchoring for a perfectly even curve. The preview shows it on real UI.

Copy the code

Export a Tailwind v4 @theme block in OKLCH, a v3 config, CSS variables, an SCSS map or JSON design tokens. The URL holds your scale.

How a Tailwind colour scale is built

A Tailwind scale has eleven steps, and each one has a job. 50 and 100 are tinted backgrounds. 200 and 300 are borders, dividers and hover fills. 400 to 600 are the colour itself, used for buttons, links, icons and focus rings. 700 to 950 are text on light backgrounds and the surfaces of dark mode. The numbers are not percentages. They are positions on a lightness curve, with 50 almost white and 950 almost black.

Since v4, Tailwind defines its palette in OKLCH, which makes the pattern easy to read. Lightness falls in a steady curve, chroma (colourfulness) swells towards the middle and fades at both ends, and the hue drifts slightly. The curve is not identical for every hue, and that detail matters:

Step	Typical job	Blue lightness	Yellow lightness
50	Page tint, subtle fills	97%	98.7%
100–200	Badges, selected rows	93% / 88%	97% / 94.5%
300–400	Borders, icons, dark-mode text	81% / 71%	90.5% / 85%
500	The “pure” brand colour	62%	79.5%
600–700	Buttons with white text, links	55% / 49%	68% / 55%
800–900	Headings, body text	42% / 38%	48% / 42%
950	Dark-mode surfaces	28%	29%

Yellow 500 is far lighter than blue 500, because yellow is naturally a light hue. A generator that uses the same lightness for every colour will turn yellow into khaki and leave blue looking washed out.

Why OKLCH, not HSL

HSL is a reshuffle of RGB, and its lightness ignores how the eye works. #ffff00 and #0000ff both have 50% HSL lightness, yet yellow on white has a contrast of about 1.07:1 and blue on white about 8.6:1. Build a scale by stepping HSL lightness and the steps look uneven, while contrast becomes guesswork.

OKLCH, published by Björn Ottosson in 2020, splits colour into perceived lightness, chroma and hue. Equal lightness looks equally bright whatever the hue, so a 700 from one family pairs with a 700 from another. It can also describe colours beyond sRGB. This tool keeps every shade inside sRGB by lowering chroma at a fixed lightness and hue, so each hex is a real colour that looks the same everywhere.

What this generator does differently

Hue-aware lightness. Each hue has a cusp, the lightness at which it reaches its most saturated sRGB colour. Yellows peak near the top of the range and blues below the middle. I fitted the lightness and chroma of every step to the cusp across all 17 chromatic Tailwind v4 palettes, so your scale lands where Tailwind would put it.
A chroma curve that tapers.Very light and very dark colours can't hold much colour in sRGB, and forcing it looks garish. Chroma peaks around 500–600 (400 for light hues) and fades towards 50 and 950.
Neutral detection.Greys and slates follow Tailwind's neutral curve, which runs darker from 500 down than the coloured families do.
Anchoring. Your exact hex takes its nearest step and the neighbours bend smoothly around it, while 50 and 950 stay put.

Common mistakes with colour scales

Mixing with white and black. Sass's lighten() and darken(), or tint-and-shade mixing, give chalky tints and dull, greyish shades. Working in OKLCH keeps the colour alive at every step.
Forcing the brand colour to 500. Let it sit where its lightness belongs and the whole scale stays usable.
Ignoring hue drift. Dark yellows look olive at a constant hue, which is why Tailwind warms them towards amber. Try a hue shift of about −20° for yellows and oranges. Blues stay richer with a small positive shift towards indigo.
Assuming 500 passes on white.Tailwind's blue-500 is about 3.7:1 against white, fine for large text and icons but not for body copy. Use 600 or 700 for text and check pairs with the colour contrast checker.

Using the output

In Tailwind v4, paste the @theme block under @import "tailwindcss"; and every utility picks up your name. In v3, merge the config into theme.extend.colors. The JSON tab follows the W3C design tokens format, which Style Dictionary and Tokens Studio can read. If you are starting from a photo or mood board rather than a hex, pull the colours out first with the palette from image tool, then run each one through this Tailwind color scale generator. For the bigger picture, read how design tokens hold a design system together.

Common questions