🎨Free Tool
Tailwind CSS Color Generator
Generate custom Tailwind CSS color scales from any hex color. Pick your base, get a full 50-950 shade palette, and export ready-to-use config.
1
Enter a hex color or pick a preset
2
Adjust the shade spread and saturation
3
Copy the tailwind.config.js snippet
50
100
200
300
400
500
600
700
800
900
950
Closest Tailwind color: blue
blue (Tailwind)brand (yours)
Export
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
colors: {
'brand': {
50: '#f3f5f8',
100: '#dfe6f3',
200: '#bacef0',
300: '#7ca8ee',
400: '#4083f1',
500: '#3b82f6',
600: '#146bfa',
700: '#0254dc',
800: '#0341a7',
900: '#032d70',
950: '#04193b',
},
},
},
},
}Accessibility (WCAG Contrast)
Click "Show" to see which shade combinations meet WCAG AA/AAA for text contrast.
Free PDF
Get the PM Toolkit Cheat Sheet
50 tools and 880+ resources mapped across 6 categories. A 2-page PDF you'll actually use.
or use email
Instant PDF download. One email per week after that.
Want full SaaS idea playbooks with market research?
Explore Ideas Pro →