Does this generate Tailwind colour scales?

Yes. The Tailwind export is a v4 @theme block with --color-name-50 through --color-name-950 in oklch(). The CSS export is the same scale as plain custom properties.

Why is the source colour not one of the steps exactly?

The steps sit at fixed, evenly spaced lightnesses. The step nearest your colour is marked; substituting the colour itself would put a stop at the wrong lightness and visibly kink the ramp.

Color Lab

Scale generator

Eleven evenly spaced steps in OKLCH lightness — so 400 to 500 looks the same size as 800 to 900.

f2f4ff

100

d4dbff

200

b6c0ff

300

99a5ff

400

7e89ff

500

676bf9

600

5452e1

700

433ac6

800

3320aa

900

25008c

950

160060

Outlined step is nearest your source colour

Source colour

Name

--brand-500

Chroma

:root {
  --brand-50: oklch(97% 0.0143 277);
  --brand-100: oklch(89.6% 0.0506 277);
  --brand-200: oklch(82.3% 0.089 277);
  --brand-300: oklch(75% 0.1298 277);
  --brand-400: oklch(67.6% 0.1729 277);
  --brand-500: oklch(60.3% 0.2082 277);
  --brand-600: oklch(52.9% 0.21 277);
  --brand-700: oklch(45.6% 0.2081 277);
  --brand-800: oklch(38.2% 0.2026 277);
  --brand-900: oklch(30.9% 0.1909 277);
  --brand-950: oklch(23.5% 0.1454 277);
}

A colour scale generator with evenly spaced steps

Give it one colour and it builds the 50 to 950 ramp a design system expects — eleven steps, evenly spaced in OKLCH lightness, so the step from 400 to 500 looks the same size as the step from 800 to 900. Scales built by nudging HSL lightness bunch in the midtones and flatten at the ends; this one does not, because the space it is built in is even.

Chroma is tapered towards both ends and capped at the gamut at every step, so the lightest and darkest stops stay distinct instead of collapsing onto the same clipped colour. A perceptual mode keeps chroma faithful to the source; a vivid mode pushes each step towards the most saturated colour available at that lightness.

How to use it

Enter the source colour and a name for the variables.
Choose perceptual or vivid chroma.
Copy the scale as CSS custom properties, a Tailwind v4 theme block, or a hex map.

Questions

Does this generate Tailwind colour scales?: Yes. The Tailwind export is a v4 @theme block with --color-name-50 through --color-name-950 in oklch(). The CSS export is the same scale as plain custom properties.
Why is the source colour not one of the steps exactly?: The steps sit at fixed, evenly spaced lightnesses. The step nearest your colour is marked; substituting the colour itself would put a stop at the wrong lightness and visibly kink the ramp.

More free colour tools

All of Color Lab runs in your browser. Nothing is uploaded and no account is needed.