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

What do Tailwind's 50 through 950 color numbers mean?
They're a perceptual lightness scale: 50 is nearly white, 500 is the base, and 950 is nearly black. The spacing isn't strictly linear, it's tuned so each step feels like a visible step in light and dark UIs.
Which Tailwind shade should I use for body text?
gray-700 or gray-800 on a white background hits WCAG AA comfortably. On dark mode, gray-200 or gray-300 on gray-900 works similarly. Avoid gray-500 for text, it usually fails contrast.
Can I use these shades without Tailwind?
Yes, the generated values are plain HEX or HSL colors. Drop them into CSS custom properties or a design token file and they'll work in any framework.