Tailwind color generator+14%
Tailwind scale · #f97316
Tangerine Dream
A Tailwind-shaped 50 → 950 ramp seeded at 500. Edit the base to reshape — the URL updates with it.
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
#fdf3ee
oklch(97.1% 0.013 48.6)
100
#fbe3d7
oklch(93.2% 0.031 48.4)
200
#f8ceb9
oklch(88.2% 0.056 48.1)
300
#f3ae8c
oklch(80.8% 0.094 47.2)
400
#e8824a
oklch(70.8% 0.144 47.8)
500
#dc5800
oklch(62.4% 0.182 43.9)
600
#ca2f00
oklch(54.9% 0.196 34.2)
700
#b51400
oklch(49.2% 0.193 30.8)
800
#931900
oklch(42.9% 0.160 32.6)
900
#742400
oklch(38.1% 0.120 39.9)
950
#471a00
oklch(28.2% 0.078 47.0)
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/dc5800. Tell me if 500 still pops.
Export
Drop it into your project
@theme {
--color-brand-50: #fdf3ee;
--color-brand-100: #fbe3d7;
--color-brand-200: #f8ceb9;
--color-brand-300: #f3ae8c;
--color-brand-400: #e8824a;
--color-brand-500: #dc5800;
--color-brand-600: #ca2f00;
--color-brand-700: #b51400;
--color-brand-800: #931900;
--color-brand-900: #742400;
--color-brand-950: #471a00;
}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.