11 shades from 50–950
Generates shades at the exact Tailwind scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.
Color Tools
Shade & Tint Generator
Generate a complete Tailwind-style color scale from any base color. Get 11 shades from lightest (50) to darkest (950) with one-click copy as hex codes or CSS variables.
Hue-accurate shading
Uses HSL lightness variation to preserve the hue and saturation of your original color across all shades.
Copy as hex or CSS vars
Copy all shades at once, export as CSS custom properties, or click any swatch to copy an individual hex.
copy
copy
copy
copy
copy
copy
copy
copy
copy
copy
copy
50
100
200
300
400
500
600
700
800
900
950
50
#F0F6FE
100
#DDE9FD
200
#B6D1FB
300
#86B2F9
400
#4C8DF6
500
#166BF3
600
#0B55CB
700
#08409B
800
#062E6F
900
#041E49
950
#02122C
How to generate color shades
Step 1
Enter a base color
Type a HEX code or use the color picker to choose your base brand or accent color.
Step 2
View your shade palette
The tool instantly generates 11 shades from very light (50) to very dark (950) based on your input.
Step 3
Copy shades
Click any swatch to copy a single hex, or use 'Copy all' or 'CSS vars' to export the entire palette.
FAQ
How are the shades generated?
The base color is converted to HSL format, and the lightness is adjusted to match Tailwind's shade scale while preserving the original hue and saturation.
Why do the shades look different from Tailwind's built-in colors?
Tailwind's built-in palettes are hand-crafted by designers. This tool generates algorithmic shades from your specific input, which may vary slightly in appearance.
Can I use this for custom Tailwind color themes?
Yes. Copy the CSS vars output and add it to your Tailwind config or CSS file as a custom color theme.