Tailwind 50-950
Tailwind CSS 10-Step Color Shades Generator
Generate mathematically balanced 50 to 950 color scales from any base hex color. Export directly to Tailwind CSS configs or CSS custom properties.
Palette Name:
10-Step Tailwind Color Ramp
50 to 950 shades50#f6f6fe
100#e5e3fb
200#cac8f7
300#a7a3f2
400#7b74ec
500#4f46e5
600#3f38b7
700#2f2a89
800#201c5c
900#110f32
950#080717
Tailwind CSS Config
'brand': {
'50': '#f6f6fe',
'100': '#e5e3fb',
'200': '#cac8f7',
'300': '#a7a3f2',
'400': '#7b74ec',
'500': '#4f46e5',
'600': '#3f38b7',
'700': '#2f2a89',
'800': '#201c5c',
'900': '#110f32',
'950': '#080717',
}CSS Custom Variables
:root {
--color-brand-50: #f6f6fe;
--color-brand-100: #e5e3fb;
--color-brand-200: #cac8f7;
--color-brand-300: #a7a3f2;
--color-brand-400: #7b74ec;
--color-brand-500: #4f46e5;
--color-brand-600: #3f38b7;
--color-brand-700: #2f2a89;
--color-brand-800: #201c5c;
--color-brand-900: #110f32;
--color-brand-950: #080717;
}10-Step Tailwind Scale (50 to 950)
Perceptual Light & Dark Weighting
Tailwind Config & CSS Variable Snippets
Click-to-Copy Individual Hex Codes
How to Use Tailwind CSS 10-Step Color Shades Generator (Step-by-Step Guide)
No software installation required. Complete your task in 3 easy steps directly in your browser.
1
Select Base Color
Pick your primary brand color using the color picker or enter any hex code.
2
Inspect Shades Ramp
Review the 10-step palette from 50 (lightest tint) to 950 (deepest shade).
3
Copy Tailwind Config
1-click copy formatted tailwind.config.js theme colors or CSS custom variables.
How helpful was this tool?
Rated 4.9 / 5 by 3,420+ users worldwide
Share with Colleagues & Friends
Help others protect their document privacy
Got Questions?
Frequently Asked Questions
The algorithm blends the base color with white for lighter steps (50-400) and with black for darker steps (600-950) using perceptual weighting.