Tailwind v4 Theme Color Generator

Enter a base color to auto-generate the standard Tailwind CSS 11-step color scale (50-950), with export to @theme configuration code.

Base Color

HEX Color Value

Theme Name (for export)

H

217°

S

91%

L

60%

Preset Colors

Export Code

@import "tailwindcss";

@theme {
  --color-brand-50: #f3f6fc;
  --color-brand-100: #e5edfb;
  --color-brand-200: #c3d8f9;
  --color-brand-300: #8db6f6;
  --color-brand-400: #468af6;
  --color-brand-500: #0b64f4;
  --color-brand-600: #0453d2;
  --color-brand-700: #0143ad;
  --color-brand-800: #013384;
  --color-brand-900: #002766;
  --color-brand-950: #00173d;
}

Shade Preview

brand

50#f3f6fc

hsl(217, 61%, 97%)

100#e5edfb

hsl(217, 71%, 94%)

200#c3d8f9

hsl(217, 81%, 87%)

300#8db6f6

hsl(217, 86%, 76%)

400#468af6

hsl(217, 91%, 62%)

500#0b64f4

hsl(217, 91%, 50%)

600#0453d2

hsl(217, 96%, 42%)

700#0143ad

hsl(217, 99%, 34%)

800#013384

hsl(217, 99%, 26%)

900#002766

hsl(217, 100%, 20%)

950#00173d

hsl(217, 100%, 12%)

Shade Bar

50

100

200

300

400

500

600

700

800

900

950

Text Contrast Preview

Shade 50

#f3f6fc

The quick brown fox jumps over the lazy dog.

Shade 100

#e5edfb

The quick brown fox jumps over the lazy dog.

Shade 200

#c3d8f9

The quick brown fox jumps over the lazy dog.

Shade 300

#8db6f6

The quick brown fox jumps over the lazy dog.

Shade 400

#468af6

The quick brown fox jumps over the lazy dog.

Shade 500

#0b64f4

The quick brown fox jumps over the lazy dog.

Shade 600

#0453d2

The quick brown fox jumps over the lazy dog.

Shade 700

#0143ad

The quick brown fox jumps over the lazy dog.

Shade 800

#013384

The quick brown fox jumps over the lazy dog.

Shade 900

#002766

The quick brown fox jumps over the lazy dog.

Shade 950

#00173d

The quick brown fox jumps over the lazy dog.

Instructions

Features

Tailwind CSS v4 uses a 50-950 color scale system by default, configured via the @theme block
Based on the HSL color space, generates 11 shades (50-950) from the base color
The shade system matches Tailwind CSS default scales and can be used directly in projects
Supports exporting as Tailwind v4 @theme configuration code
17 built-in preset colors for one-click application of common brand colors
Real-time preview of text contrast on each shade

Tips

Click the color swatch on the left to open the system color picker
Enter a HEX value (e.g. #3b82f6) to specify a color precisely
After entering a theme name, the variable names in the exported code will be replaced automatically
When exporting Tailwind v4 format, use the @theme directive to configure custom colors
Hover the shade bar to view the shade number; click to copy the HEX value
The text contrast preview helps you choose a suitable text color pairing