Tailwind Scale Generator
Generate a full 50–950 Tailwind shade scale from any color.
Base Color
Royal Blue
11 shades
50 → 950
Export
colors: {
brand: {
"50": "#f2f2fd",
"100": "#e5e4fb",
"200": "#c7c5f7",
"300": "#a19df1",
"400": "#7670eb",
"500": "#4f46e5",
"600": "#281fd6",
"700": "#2019ae",
"800": "#1b148f",
"900": "#161174",
"950": "#0e0b4c",
}
}Direct answer
HueFlow's Tailwind Color Scale Generator takes any hex color and produces a full 50-950 Tailwind-style shade scale, so teams can drop a brand color straight into a Tailwind config without hand-tuning each step.
Frontend developers and designers building a custom brand color into a Tailwind design system.
Best use cases
- Turn a single brand hex value into a full Tailwind-compatible shade scale
- Generate consistent light and dark steps for a new accent or semantic color
- Copy a ready-to-paste Tailwind config object for a custom color
How to use this tool
- 1Enter or pick your base hex color.
- 2Review the generated 50 through 950 shade scale.
- 3Click any step to copy its hex value, or use Copy as Tailwind config for the full object.
- 4Paste the result into your tailwind.config.js theme colors.
How we structure these pages
Clear answers first
Every page leads with a direct answer — no preamble, no filler. Get what you need without scrolling through editorial context.
Grouped by topic
Content is organized into concise, scannable sections so you can jump to exactly the guidance you need.
Linked to tools
Each page connects to related tools, palettes, and implementation resources so you can act on what you learn immediately.
FAQ
How is the scale generated from one color?
The base color's hue and saturation are preserved across all steps, while lightness follows a curve modeled on Tailwind's own default palettes, so the result looks consistent with Tailwind's built-in colors.
Which step matches my original color exactly?
The step closest to your base color's actual lightness keeps your exact hex value; every other step is generated around it.