Tailwind Color Generator
Generate full Tailwind color scales from a base color
Color Settings
Used in Tailwind classes like bg-primary-500
Generated Color Scale
Click any color to copy its hex value
50#F1F6FE
100#E3EDFD
200#C0D7FC
300#8FB7FA
400#5492F7
500#3B82F6
600#0562F9
700#004DCB
800#003A98
900#002665
950#00173C
Usage Examples
50
100
500
900
text-primary-600: The quick brown fox jumps over the lazy dog
text-primary-700: The quick brown fox jumps over the lazy dog
text-primary-800: The quick brown fox jumps over the lazy dog
text-primary-900: The quick brown fox jumps over the lazy dog
border-primary-300
border-primary-400
border-primary-500
border-primary-600