Skip to content
Aback UI

Free toolRuns in your browser

Tailwind CSS colour scale generator

Turn one brand colour into an 11-step palette from 50 to 950, generated in OKLCH, with the contrast of every shade shown and exports for Tailwind v4, Tailwind v3, and plain CSS.

Kept exactly at the shade whose lightness is closest.

Used as --color-brand-500 and bg-brand-500.

  1. 50#f0f8ffContrast on white 1.07:1, on black 18.44:1
  2. 100#dbeeffContrast on white 1.18:1, on black 16.65:1
  3. 200#badeffContrast on white 1.40:1, on black 14.09:1
  4. 300#8ac7ffContrast on white 1.79:1, on black 11.05:1
  5. 400#43abffContrast on white 2.45:1, on black 8.04:1
  6. 500 (your base colour)#009bf9Contrast on white 2.97:1, on black 6.65:1
  7. 600#0078c2Contrast on white 4.72:1, on black 4.19:1
  8. 700#005f9bContrast on white 6.79:1, on black 2.91:1
  9. 800#00497aContrast on white 9.36:1, on black 2.11:1
  10. 900#00385fContrast on white 12.17:1, on black 1.62:1
  11. 950#002541Contrast on white 15.73:1, on black 1.25:1
@theme {
  --color-brand-50: oklch(97.5% 0.0125 246.61);
  --color-brand-100: oklch(94% 0.0304 246.63);
  --color-brand-200: oklch(88.5% 0.0596 246.64);
  --color-brand-300: oklch(81% 0.1013 246.64);
  --color-brand-400: oklch(72% 0.1545 246.65);
  --color-brand-500: oklch(66.99% 0.1748 246.65);
  --color-brand-600: oklch(55.5% 0.1449 246.67);
  --color-brand-700: oklch(47% 0.1227 246.68);
  --color-brand-800: oklch(39.51% 0.1032 246.7);
  --color-brand-900: oklch(33.01% 0.0863 246.74);
  --color-brand-950: oklch(25.51% 0.0668 246.84);
}

How to use the generator

  1. Enter your brand colour. It stays exactly as it is at the shade it is closest to.
  2. Name the colour. The name becomes the utility prefix, so brand gives you bg-brand-500.
  3. Check the contrast under each shade. The first ratio is on white, the second on a near-black #0a0a0a.
  4. Copy the export for your setup and paste it into your global stylesheet or Tailwind config.

How the scale is built

Each shade has a target OKLCH lightness, from about 97.5% at 50 down to about 25.5% at 950, close to the spacing of Tailwind's own default palette. Every shade takes your colour's hue. Chroma follows a curve that peaks around 500 and eases off at both ends, so the palest and deepest shades do not turn neon or muddy. Where a shade would fall outside what an sRGB screen can display, its chroma is reduced at the same lightness and hue until it fits.

Choosing shades for text and backgrounds

A practical rule for light themes: shades from 50 to 200 work as tinted backgrounds, 500 and 600 work for icons and borders that need 3:1, and text usually needs 700 or darker to reach 4.5:1 on white. Dark themes invert that. The ratios under each swatch tell you for certain; for a full set of roles picked automatically, use the theme generator, and to test a specific pair use the contrast checker.

Tailwind CSS v4 versus v3 output

Tailwind v4 is configured in CSS. Colours declared as --color-* variables inside @theme become utilities and are also available as CSS variables at runtime. Tailwind v3 reads colours from tailwind.config.js instead, which is what the v3 tab writes. Read Design tokens in Tailwind CSS v4 for how to layer semantic roles on top of a scale like this one.

Frequently asked questions

How do I add a custom colour scale in Tailwind CSS v4?

Declare it as theme variables in your CSS: @theme { --color-brand-500: oklch(...); } and so on for each shade. Tailwind v4 then generates bg-brand-500, text-brand-500, border-brand-500, and the rest automatically. There is no tailwind.config.js entry to add.

Does the generator keep my exact brand colour?

Yes. Your colour is placed unchanged at the shade whose lightness is closest to it, marked Base. The other ten shades are generated around it with the same hue.

Why does the scale use OKLCH instead of HSL?

OKLCH lightness is perceptual, so evenly spaced lightness values look evenly spaced, and changing lightness does not shift the apparent hue the way HSL often does with blues and purples. Tailwind CSS v4 defines its own default palette in OKLCH for the same reason.

Can I use the output with Tailwind CSS v3?

Yes. Choose the Tailwind v3 tab to get a theme.extend.colors object for tailwind.config.js with HEX values, or the CSS variables tab for plain custom properties.