TTULAKITO
Designer

Tailwind Shade Generator

Generate a Tailwind-style 50 to 950 color scale from one color.

All tools

Palette

50
#f5f9ff
100
#e7effe
200
#cee0fd
300
#9dc1fb
400
#5492f7
500
#0b64f4
600
#0954cd
700
#0846ab
800
#063889
900
#042862
950
#03183b

Tailwind config

colors: {
  brand: {
    "50": "#f5f9ff",
    "100": "#e7effe",
    "200": "#cee0fd",
    "300": "#9dc1fb",
    "400": "#5492f7",
    "500": "#0b64f4",
    "600": "#0954cd",
    "700": "#0846ab",
    "800": "#063889",
    "900": "#042862",
    "950": "#03183b",
  },
}

CSS variables

:root {
  --brand-50: #f5f9ff;
  --brand-100: #e7effe;
  --brand-200: #cee0fd;
  --brand-300: #9dc1fb;
  --brand-400: #5492f7;
  --brand-500: #0b64f4;
  --brand-600: #0954cd;
  --brand-700: #0846ab;
  --brand-800: #063889;
  --brand-900: #042862;
  --brand-950: #03183b;
}

Frequently asked questions

Is Tailwind Shade Generator free to use?
Yes. Tailwind Shade Generator is part of TULAKITO's collection of free browser tools. No signup, no subscription, no usage limits.
Is my data safe with Tailwind Shade Generator?
Yes. Tailwind Shade Generator runs entirely in your browser. Nothing you type, paste, or upload is sent to any server.
Do I need to install anything?
No. Tailwind Shade Generator works directly in your browser on desktop and mobile — no downloads or extensions required.