Free tool

Tailwind Shade Generator

Paste a hex color and get the full Tailwind scale from 50 to 950, plus a config snippet you can drop straight into tailwind.config.

50#f3f7fb

100#e8eff8

200#c6daf0

300#9ebfe6

400#6da0d9

500#3c80cd

600#2e6cb2

700#265892

800#1d4572

900#173659

950#112237

tailwind.config

colors: {
  brand: {
    50: '#f3f7fb',
    100: '#e8eff8',
    200: '#c6daf0',
    300: '#9ebfe6',
    400: '#6da0d9',
    500: '#3c80cd',
    600: '#2e6cb2',
    700: '#265892',
    800: '#1d4572',
    900: '#173659',
    950: '#112237',
  },
}

FAQ

How are the shades calculated?

Your color's hue is preserved while lightness is mapped across Tailwind's 50–950 steps, with slight saturation adjustments at the extremes so the scale stays balanced.

How do I use the output?

Copy the config snippet and paste it under theme.extend.colors in your tailwind.config file. Rename 'brand' to whatever you like.

Now design the whole app.

Bender turns a prompt into a full set of themed mobile screens you can edit, test, and export. Free to start — no credit card.

Try Bender free