Tailwind Color Scale Generator

About Color Scale Generator

Turns one colour into the eleven-step scale design systems are built on — 50 for the faintest background tint, 950 for near-black text — and writes it as CSS custom properties, a Tailwind v4 theme, a Tailwind v3 config, SCSS variables or JSON.

The steps are spaced in OKLCH, not HSL. HSL lightness is a formula, not a perception: yellow at 50% is far brighter than blue at 50%, so a scale stepped in HSL looks lumpy and differs from colour to colour. OKLCH lightness was fitted to how people see brightness, so each step here looks the same distance from the next, and a blue scale and a green scale made here line up step for step.

Your colour stays exactly as it is. It is placed at the step whose lightness it already has — or the one you choose — and the rest of the scale is built around it. Light steps keep less chroma, because a very pale colour cannot carry much saturation in sRGB, and any step that would fall outside the screen's gamut is pulled back rather than clipped into a different hue.

Every step is listed with the text colour that reads on it and the contrast ratio, so the pairs that pass WCAG for text are visible before anything ships.

Where it helps

• Even steps in OKLCH lightness, so scales look consistent from one hue to the next.
• Keeps your exact base colour at the step it fits, or at one you choose.
• Pulls chroma back where a step would leave sRGB, instead of letting it shift hue.
• Shows the readable text colour and contrast ratio for every step.
• Writes CSS variables, Tailwind v4 and v3, SCSS or JSON.

Limits

• A generated scale is a starting point: brand teams usually hand-tune a step or two, especially yellows, which look muddy when darkened.
• Very light or very dark base colours leave less room on one side, so their steps sit closer together there.
• oklch() values need a current browser; choose hex if you support very old ones.

Frequently asked questions

Why not just lighten and darken in HSL?

Because HSL lightness is not how bright a colour looks. Lightening a yellow and a blue by the same HSL amount produces two very different jumps, so scales made that way never match each other. OKLCH lightness tracks perceived brightness, which is why modern palettes — including Tailwind's since v4 — are defined in it.

Which steps should I use for text?

Check the contrast column: a step marked white 4.5:1 or more can carry normal-size white text. As a rule of thumb, text on a 50–100 background uses 700–900 of the same scale, and white text sits on 600 and darker.

Why do some steps say chroma was reduced?

A very light or very dark colour cannot be as saturated as a mid-tone and still be showable on an sRGB screen. Rather than let the browser clip it — which shifts the hue — the chroma is lowered just enough to stay in range.

Can I use the result in Tailwind v3?

Yes — choose Tailwind v3 config and paste the colours object into theme.extend.colors. Hex values work everywhere; oklch() needs Tailwind v3.3 or later and a modern browser.

Related tools

• Palette Generator — Harmonious colour schemes from a base colour
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it