Tailwind Palette Generator
Generate 50-950 shades from a base color and export Tailwind config and CSS variables for branding and theming
Settings
Supports #RGB / #RRGGBB. Click any swatch to copy
Keeps letters/numbers/_/- for config key and CSS var prefix
Generated Shades
Click a swatch to copy HEX
50
100
200
300
400
500
600
700
800
900
950
Exports
Tailwind Config
colors: {
primary: {
50: '#D4FFFF',
100: '#AEF5FF',
200: '#88CFFF',
300: '#6EB5FF',
400: '#559CFF',
500: '#3B82F6',
600: '#2269DD',
700: '#084FC3',
800: '#00299D',
900: '#000377',
950: '#000050',
}
}CSS Variables
:root {
--primary-50: #D4FFFF;
--primary-100: #AEF5FF;
--primary-200: #88CFFF;
--primary-300: #6EB5FF;
--primary-400: #559CFF;
--primary-500: #3B82F6;
--primary-600: #2269DD;
--primary-700: #084FC3;
--primary-800: #00299D;
--primary-900: #000377;
--primary-950: #000050;
}All Colors
50: #D4FFFF
100: #AEF5FF
200: #88CFFF
300: #6EB5FF
400: #559CFF
500: #3B82F6
600: #2269DD
700: #084FC3
800: #00299D
900: #000377
950: #000050Docs
What is a Tailwind palette?
Tailwind CSS commonly uses numeric steps (50-950) to represent lighter and darker shades of the same color. This makes design tokens consistent across backgrounds, text, borders, hover states and emphasis. This tool generates a Tailwind-like shade scale from any base color.
About 50-950 steps
- 50-100: very light, often for backgrounds
- 200-300: light, for subtle surfaces
- 400-500: mid tones, 500 is often the base
- 600-700: darker, for buttons and emphasis
- 800-900: very dark, for main text or dark UI
- 950: the darkest, for maximum contrast
How to use
- Pick or type a base color (aim for a 500-like strength)
- Click a swatch to copy a HEX value, or copy the full list
- Copy the Tailwind config into tailwind.config.js under theme.extend.colors
- Copy CSS variables into global styles and use var(--primary-500)
FAQ
How should I choose the base color?
A mid-lightness base color usually produces the most balanced scale. Extremely light or dark bases may compress the range.
Will it match official Tailwind colors exactly?
Not exactly. It uses a lightweight algorithm to generate a similar-looking scale for custom brand colors and themes.
Can I use both Tailwind config and CSS variables?
Yes. Use Tailwind tokens for class-based styling and CSS variables for runtime theming; they can coexist.