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
Lima
50
f3fce9
100
e4f7d0
200
caf0a6
300
a7e472
400
88d447
Unlock
500
65b427
600
4e941c
700
3d711a
800
335a1a
900
2d4d1a
950
152a09
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, March 28
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
Disabled
Got feedback?
We'd love to know what you think about UI Colors.
