Tailwind CSS
Color Generator

Enter a hexcode to create a custom color scale

Cerise Red
50
fef2f4
100
fde6e9
200
fbd0d9
300
f7aab9
400
f27a93
500
e63f66
600
d42a5b
700
b21e4b
800
951c45
900
801b40
950
470a1f
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.