UI Scale Generator

Enter a single brand color and instantly generate a perfectly balanced 11-step scale for Tailwind CSS.

Configure Scale

Set your base color and copy the config.

Base Brand Color

CSS Variable NameAuto

Tailwind Configuration

"blue": {  50: "#F5F9FF",
  100: "#EBF3FE",
  200: "#CEE0FD",
  300: "#B1CDFB",
  400: "#76A8F9",
  500: "#3B82F6",
  600: "#3575DD",
  700: "#2C62B9",
  800: "#234E94",
  900: "#183462",
  950: "#0F213E",
}

950

blue-950

#0F213E

900

blue-900

#183462

800

blue-800

#234E94

700

blue-700

#2C62B9

600

blue-600

#3575DD

500Base

blue-500

#3B82F6

400

blue-400

#76A8F9

300

blue-300

#B1CDFB

200

blue-200

#CEE0FD

100

blue-100

#EBF3FE

blue-50

#F5F9FF