AIColors

OKLCH · TONAL SCALES

Color Shades & Tints Generator

Drop in one color and get a perceptually uniform scale — three modes (tonal, tints, shades), 3–13 steps, and exports for Tailwind v4 or plain CSS variables.

11

Tip

In a Tailwind v4 project, paste the Tailwind export under @theme { … } and your custom shade utilities like bg-brand-500 start working immediately.

Export scale

HEX list

#F6ECFF, #EDE0FF, #DAC9FF, #C2AAFF, #A583FF, #8B57F8, #7538E0, #5D28B5, #46198C, #2A085C, #0F002C

CSS variables

:root {
  --color-50: #F6ECFF;
  --color-100: #EDE0FF;
  --color-200: #DAC9FF;
  --color-300: #C2AAFF;
  --color-400: #A583FF;
  --color-500: #8B57F8;
  --color-600: #7538E0;
  --color-700: #5D28B5;
  --color-800: #46198C;
  --color-900: #2A085C;
  --color-950: #0F002C;
}

Tailwind theme

brand: {
  '50': '#F6ECFF',
  '100': '#EDE0FF',
  '200': '#DAC9FF',
  '300': '#C2AAFF',
  '400': '#A583FF',
  '500': '#8B57F8',
  '600': '#7538E0',
  '700': '#5D28B5',
  '800': '#46198C',
  '900': '#2A085C',
  '950': '#0F002C',
}

Why OKLCH

HSL lightness lies. OKLCH does not.

For two decades the standard trick was to take HSL and step the L value from 90% to 10% — instant scale. The output is always disappointing: yellow-50 disappears into the page, blue-900 looks indistinguishable from black, the supposed "middle" is anything but.

OKLCH fixes this. Its L axis is perceptually uniform — moving from 0.7 to 0.5 looks like the same brightness change whether the hue is red, blue, or yellow. Two scales generated from different hues with the same L ladder will read as the same brightness at every step.

Every shade we generate here lives on the OKLCH ladder Tailwind v4 ships with: roughly L 0.97 at the 50 step down to L 0.15 at 950. Chroma is gently reduced near the extremes — pure whites and near-blacks have low saturation by physics. The result drops cleanly into a Tailwind theme.

Three modes, three jobs

The right output depends on the question you are answering.

Tonal (50 → 950)

Full scale on a fixed L ladder. Use this when extending a design system, building UI tokens, or matching Tailwind's naming convention.

Tints (lighter)

Steps from your color toward white. Use for layered backgrounds, hover states, and tint-overlays on top of a brand color.

Shades (darker)

Steps from your color toward near-black. Use for pressed states, text variants on light backgrounds, and dark-mode surfaces.

Frequently asked questions

Is this generator free?
Yes — fully free, no signup, runs entirely in your browser.
Why don't the 50 and 950 steps match my brand color?
They are not supposed to. In a tonal scale the brand color usually lives near 500 — the middle. The 50 step is a near-white wash of your hue, the 950 step is a near-black version. The base color you input becomes the "feel" of the whole scale.
Can I match the Tailwind ladder exactly?
We use the same L positions Tailwind v4 ships with for its default palettes, so the perceived brightness at each step matches what you see in slate, blue, etc. The exact chroma values are not identical (Tailwind hand-tunes each hue) but the result will read as the same scale family.
What happens when chroma is out of gamut?
Highly saturated colors at the dark end of OKLCH can exceed the sRGB gamut. We clamp to in-gamut colors silently — the result is the closest displayable color, which is usually exactly what you wanted.
How many steps should I use?
11 is the Tailwind convention and what most design systems standardize on. 9 works if you want a tighter scale; 5 is too sparse for production but useful for quick palette exploration.
Can I share my scale?
Yes — the share button copies the page URL with the color, mode, and step count encoded in the hash. Anyone opening the link sees the same scale.
Does the tints/shades mode use HSL or OKLCH?
OKLCH. Lerping toward white or black in OKLCH space produces perceptually even steps; lerping in HSL produces uneven steps where the middle saturates oddly. Try both and you will see the difference.

Pair with our other color tools

Tailwind Colors Reference

Compare your generated scale against Tailwind's 22 default hues.

Color Converter

Convert any step into OKLCH, RGB, HSL, or platform code.

Contrast Checker

Validate text / background pairs from your scale against WCAG.

Color Harmony Generator

Choose a harmony first, then build tonal scales for each selected hue.