Tailwind Scale Generator

Enter your brand's base color, and the tool will automatically generate a complete color scale from 50 to 950 based on luminance, ensuring clear visual hierarchy. You can generate multiple color sets at once and export them with a single click as CSS variables or a Tailwind configuration file, ready to be pasted directly into your project.

#3b82f6
50
#f2f6fc
100
#e1eaf9
200
#c1d5f6
300
#91b6f3
400
#5491f2
500
#0b64f4
600
#0754cf
700
#0443a9
800
#033382
900
#01235b
950
#00173d

What are Tailwind Color Scales?

Tailwind CSS uses a numeric scale from 50 (lightest) to 950 (darkest). This tool generates complete scales from any base color, supports up to 5 colors, and exports as CSS variables or Tailwind config.

  • Generate full 50-950 scale from any HEX
  • Create up to 5 scales at once
  • Export CSS variables or Tailwind config
  • Click any swatch to copy

FAQ