Back to gallery+14%
Tool
Tailwind color generator
Any hex → a Tailwind-shaped 50 → 950 ramp. Perceptual by default, exports straight into your config.
Base color
#
→ bg-brand-500
Color space
11 shades
bg-brand-50 → bg-brand-950
50
100
200
300
400
500
600
700
800
900
950
50
#fff1f2
oklch(96.9% 0.015 12.4)
100
#ffe0e1
oklch(93.2% 0.034 15.6)
200
#fec8cb
oklch(88.1% 0.062 14.7)
300
#fca5ab
oklch(80.9% 0.103 15.1)
400
#f27280
oklch(70.7% 0.158 15.2)
500
#e83d5e
oklch(62.3% 0.206 14.9)
600
#d60042
oklch(55.6% 0.222 16.7)
700
#c00032
oklch(51.1% 0.205 19.5)
800
#9c002a
oklch(43.9% 0.176 18.2)
900
#7b0f29
oklch(37.9% 0.140 15.0)
950
#4b111b
oklch(28.1% 0.087 14.9)
In the wild
Preview across common UI
Buttons · brand-500 / brand-100 / brand-300 / brand-600
ActiveNewBeta
Alert · 50 / 200 / 500 / 700 / 900
Deploy in progress
Your build is packaging. We'll ping you the moment it's live on the CDN.
Dark surface · 900v2.1
Pricing · 100 / 500 / 700 / 900
Most popular
Studio plan
$24/ month
- Unlimited palettes
- Realtime collaboration
- Priority support
Stats · 50 / 300–700 / 900
Daily visits
12,408
Calendar · 50 / 500 / 900
April 2026
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Sidebar nav · 100 / 500 / 700
Dashboard
Projects12
Team
Calendar3
Reports
Settings
Form · 200 / 500 / 700
jane@studio.design
••••••••••
Messages · 100 / 500 / 700
Sam
Can you tighten the accent? 700 reads a touch heavy to me.Yeah — OKLCH evens out the mids. Pushing chroma on 600–700.
Sam
Share when it's live?Here: /tailwind/e83d5e. Tell me if 500 still pops.
Export
Drop it into your project
@theme {
--color-brand-50: #fff1f2;
--color-brand-100: #ffe0e1;
--color-brand-200: #fec8cb;
--color-brand-300: #fca5ab;
--color-brand-400: #f27280;
--color-brand-500: #e83d5e;
--color-brand-600: #d60042;
--color-brand-700: #c00032;
--color-brand-800: #9c002a;
--color-brand-900: #7b0f29;
--color-brand-950: #4b111b;
}About this scale
Perceptual by default
The OKLCH mode picks a lightness target per step from a curve fit to Tailwind v4's own blue scale, then sets each step's chroma as a multiplier of your base. That keeps saturation honest as you move up and down the ramp — no muddy midtones.
HSL mode mirrors older Tailwind 3.x outputs: same hue, same saturation curve, different lightness per step. Flatter look, wider compatibility with legacy tooling that assumes HSL.
How the URL works
Every base color has its own page
A Tailwind URL looks like /tailwind/ff5470. One hex, one shareable scale. The page updates live as you edit, so you can bookmark any ramp you want to keep — no database, no sign-up.