Tailwind CSS
Color Generator

Enter a hexcode to create a custom color scale

Purple Heart
50
f3f1ff
100
ebe5ff
200
d9ceff
300
bea6ff
400
9f75ff
500
843dff
600
7916ff
700
6b04fd
800
5a03d5
900
4b05ad
950
2c0076
Examples
Customers
1,553
New customers in past 30 days
Revenue
$12,543
Jan
Feb
Mar
Apr
May
Jun
Today
Design system meeting
9 - 10 AM
Lunch
1 - 2 PM
Design review
3 - 4 PM
Create
color scales
in seconds.
Create
color scales
in seconds.
Create
color scales
in seconds.
Buttons · Flat
Default
Hover
Active
Disabled
Buttons · Outline
Default
Hover
Active
Disabled
Buttons · Bezel
Default
Hover
Active
Disabled
Got feedback?
We'd love to know what you think about UI Colors.