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
Flush Orange
50
fff7ed
100
ffedd4
200
ffd6a8
300
ffb971
Unlock
400
ff8a2e
500
fe7011
600
ef5507
700
c63d08
800
9d320f
900
7e2b10
950
441206
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
Wednesday, March 26
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.
