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
Apple
50
f3fbf2
100
e2f8e0
200
c6efc3
300
9be095
400
66c95f
Unlock
500
41af39
600
318f2a
700
297124
800
245a21
900
1f4a1d
950
0c280b
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
Saturday, March 29
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.
