Tailwind Color Shades Generator

Enter a brand color and get eleven balanced shades from 50 to 950, like Tailwind's built-in palettes. Your exact color is kept, and you can export it for Tailwind v4, v3 or plain CSS.

Base color

Base color goes at

Color name

#f4f6ff

1.1:1 on white

100

#e1e6ff

1.2:1 on white

200

#cad2ff

1.5:1 on white

300

#aab5ff

1.9:1 on white

400

#828dff

2.9:1 on white

500

#6363ff

4.4:1 on white

600base

#4f46e5

6.3:1 on white

700

#4032c8

8.4:1 on white

800

#3324a7

10.8:1 on white

900

#281d87

13.0:1 on white

950

#1a135f

16.1:1 on white

Export for

@theme {
  --color-brand-50: oklch(97.5% 0.012 276.5);
  --color-brand-100: oklch(92.9% 0.034 276.8);
  --color-brand-200: oklch(87.3% 0.062 276.9);
  --color-brand-300: oklch(79.3% 0.106 276.9);
  --color-brand-400: oklch(68.7% 0.166 277.0);
  --color-brand-500: oklch(59.1% 0.226 277.0);
  --color-brand-600: oklch(51.1% 0.230 277.0);
  --color-brand-700: oklch(44.4% 0.219 277.0);
  --color-brand-800: oklch(38.3% 0.196 277.0);
  --color-brand-900: oklch(33.1% 0.166 277.0);
  --color-brand-950: oklch(26.0% 0.127 277.0);
}

Use it as bg-brand-500, text-brand-700, border-brand-200 and so on. Base color: hsl(243, 75%, 59%).

From one brand color to a complete palette

Tailwind CSS ships with color palettes of eleven shades each, from a barely-there 50 to a near-black 950. Those scales are what make utilities like bg-blue-50, border-blue-200 and text-blue-700 work together. Your brand color, though, usually arrives as a single hex code. This generator builds a matching 50–950 scale around it, so your custom color behaves just like the built-in ones.

How to generate your shades

Enter your brand color in any format — HEX, RGB or HSL — or use the color picker.
Choose whether your color should sit at the closest matching step or always at 500.
Give the palette a name, such as brand or primary.
Review the swatches: each shows its HEX code and contrast ratio on white.
Export for Tailwind v4, Tailwind v3 or plain CSS variables, and copy the code.

How the palette is built

Mixing a color with white and black in RGB produces muddy, uneven shades. Instead, this tool works in OKLCH, a color space designed so that equal steps in lightness look equal to the human eye — the same space Tailwind v4 uses for its default colors. Every step gets a target lightness modelled on Tailwind’s palettes, while the hue stays fixed. Chroma (colorfulness) is highest in the middle and gently reduced toward 50 and 950, because very light and very dark colors can’t hold much saturation without looking artificial or falling outside what screens can display.

Your exact input color is kept. In “closest step” mode it’s placed where its lightness fits naturally — a dark navy might become 800, a light mint 200 — and the rest of the scale is adjusted around it. Shades that would fall outside the sRGB range are brought back in by reducing chroma, so what you see is what browsers will render.

Using the palette in Tailwind

Tailwind v4: paste the @theme block into your main CSS file after @import "tailwindcss";. The colors use oklch(), matching Tailwind’s own palette.
Tailwind v3: paste the colors object into theme.extend.colors in tailwind.config.js.
Other projects: use the plain CSS variables export with var(--brand-500).

Choosing accessible shades

A common pattern is 50–100 for backgrounds, 200–300 for borders, 500–600 for buttons and 700–900 for text. The contrast figure under each swatch shows whether a shade passes the WCAG 4.5:1 minimum for normal text on white. For text on colored backgrounds or in dark mode, check the exact pair with the Color Contrast Checker.

Convert any shade to other formats with the Color Converter, or use your new palette in gradients and shadows with the CSS Gradient & Box Shadow Generator.

Frequently asked questions

How are the shades generated?

The tool works in the OKLCH color space, which matches how people perceive lightness. Each step gets a target lightness similar to Tailwind's own palettes, the hue stays the same, and saturation is reduced at the lightest and darkest ends so shades don't look garish.

Will my exact brand color appear in the palette?

Yes. By default it's placed at the step closest to its lightness (often 500 or 600), unchanged. You can also force it to be the 500 shade.

How do I add the palette to Tailwind v4?

Copy the @theme block into your main CSS file after @import "tailwindcss". Classes like bg-brand-500 and text-brand-700 then work immediately.

How do I add it to Tailwind v3?

Choose the v3 export and paste the colors object into theme.extend.colors in tailwind.config.js.

Which shades are safe for text?

Each swatch shows its contrast ratio on white. Shades with 4.5:1 or more meet WCAG AA for normal text on a white background; check dark-mode pairs with the Color Contrast Checker.