Tailwind Shade Generator

Generate a perfectly balanced 50-950 Tailwind color palette from a single base hex code.

Base Color

Select your brand's primary color. We will set this as the 500 base weight and calculate the remaining 10 steps automatically.

Export Configuration

{
    50: '#f5f9ff',
    100: '#ebf3fe',
    200: '#cee0fd',
    300: '#b1cdfb',
    400: '#76a8f9',
    500: '#3b82f6',
    600: '#2c62b9',
    700: '#1e417b',
    800: '#12274a',
    900: '#091425',
    950: '#040911',
}

50#f5f9ff

COPY

100#ebf3fe

COPY

200#cee0fd

COPY

300#b1cdfb

COPY

400#76a8f9

COPY

500#3b82f6

COPY

600#2c62b9

COPY

700#1e417b

COPY

800#12274a

COPY

900#091425

COPY

950#040911

COPY