Tailwind Colors
Generate Tailwind CSS color scales from any color
50
#f5f9f8
100
#eaf5f1
200
#cceae0
300
#9ee6ce
400
#62e4b9
500
#10b77f
600
#098b60
700
#045d3f
800
#033524
900
#042017
950
#03110d
50
#f5f9f8Click to copy100
#eaf5f1Click to copy200
#cceae0Click to copy300
#9ee6ceClick to copy400
#62e4b9Click to copy500
#10b77fClick to copy600
#098b60Click to copy700
#045d3fClick to copy800
#033524Click to copy900
#042017Click to copy950
#03110dClick to copyHow to use Tailwind Colors
- Pick a base color using the color picker or enter a hex code.
- Name your color (used in config output, e.g. brand, primary, accent).
- The full 50-950 shade scale generates automatically.
- Copy as Tailwind config, CSS variables, or click individual swatches.
Custom Tailwind CSS color scales
Tailwind CSS uses a numbered scale from 50 (lightest) to 950 (darkest) for each color. The default palette includes carefully tuned colors like blue, red, and emerald, but projects often need custom brand colors that follow the same pattern.
This generator takes any base color and creates a perceptually balanced scale by adjusting lightness and saturation in HSL color space. Shade 500 matches your input, lighter shades fade toward white, and darker shades deepen toward black.
The output works directly in tailwind.config.js under theme.extend.colors, giving you utility classes like bg-brand-100, text-brand-700, etc.
Frequently Asked Questions
How are the color shades generated?
The tool converts your base color to HSL, then adjusts lightness for each shade. Shade 500 is your input color. Lighter shades (50-400) increase lightness, darker shades (600-950) decrease it. Saturation is subtly adjusted to maintain vibrancy.
Can I use these in my Tailwind config?
Yes. Click "Copy Tailwind Config" to get the exact JavaScript object you can paste into your tailwind.config.js under theme.extend.colors.
What color formats are supported?
Enter any valid hex color (#FF5733) or use the color picker. Output is available in hex, RGB, and HSL.
Does this match Tailwind default colors exactly?
Not exactly. Tailwind default colors are hand-tuned by designers. This tool generates mathematically consistent scales that look great but may differ from official Tailwind palettes.