Tailwind CSS Color Generator
Hit the spacebar, enter a hex code, or tweak the HSL or OKLCH values to create your custom color scale.
Random
Purple Pizzazz
50
fff2fc
100
ffe5fa
200
ffc9f4
300
ff9fe7
400
ff66d7
500
ff2ed0
Unlock
600
f324c7
700
c40797
800
a0087b
900
820d62
950
590041
UI Examples
Track your
expenses
expenses
Expenses
$12,543
Jan
Feb
Mar
Apr
May
Jun
Gain
control
control
Categories
Groceries
9 transactions
Household
12 transactions
Travel
6 transactions
Other
6 transactions
Create
budgets
budgets
Income
$15,989
$18,871 last period
Expenses
$12,543
$10,221 last period
Savings
$5,210
10,221 last period
Hannah
Laurent
Laurent
Expenses
$ 14,919
Groceries | $ 4,973 | |
Household | $ 4,973 | |
Travel | $ 4,973 |
Daniel
Johnson
Johnson
Blog
Productivity Hacks for Life on the Road
Work
The Ultimate Digital Nomad Toolkit
Travel
Design in Cross-Functional Teams
Design
Todo
Process clients feedback in the design proposal
Today
Design 5 alternative hero sections for the homepage
Tomorrow
Design system meeting preparation
In 2 days
Jobs
Senior Software Engineer - Laravel & MySQL
Part-time
Remote
Lead Product Designer - Figma, Shape-up
Full-time
Remote
Senior Frontend Developer - Vue.js in Amsterdam
Part-time
Remote
Get discount
on purchases
on purchases
21 Feb, 12:34
Get discount on purchases and save 20%
Travel
Friday, April 4
Design system meeting
9 - 10 AM
Lunch
1 - 2 PM
Design review
3 - 4 PM
Remote
working
working
Buttons · Depth
Default
Hover
Active
Disabled
Buttons · Soft
Disabled
Buttons · Flat
Default
Hover
Active
Disabled
Got feedback?
We'd love to know what you think about UI Colors.
