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
Aquamarine
50
e8fff8
100
c8ffec
200
96ffde
300
53ffd3
Unlock
400
10f7c0
500
00dfaa
600
00b78c
700
009274
800
00735e
900
005e4f
950
00362e
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, April 9
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.
