tailwind / rose

400

#FB7185

bg-rose-400

Color Codes

HEX#FB7185
RGBrgb(251, 113, 133)
HSLhsl(351, 95%, 71%)
OKLCHoklch(71.9% 0.169 13.4)
R251
G113
B133
Hue351°
Saturation95%
Lightness71%
OKL71.9%
Chroma0.169

Tailwind Classes

Backgroundbg-rose-400
Texttext-rose-400
Borderborder-rose-400
Ringring-rose-400
Outlineoutline-rose-400
Shadowshadow-rose-400
Caretcaret-rose-400
Accentaccent-rose-400
Fillfill-rose-400
Strokestroke-rose-400
From (gradient)from-rose-400
To (gradient)to-rose-400

UI Previews

Solid Button
Outlined Button
Ghost Button
Badge / Tag
New FeatureBeta
Text on White

The quick brown fox

jumps over the lazy dog — 0123456789

Text on Dark

The quick brown fox

jumps over the lazy dog — 0123456789

Card Header
Dashboard Overview

Monthly active users increased by 24% this quarter.

Alert / Banner
●Your changes have been saved successfully.
Progress Bar
68%
Input / Focus Ring
Gradient (to white)
Gradient (to black)

Similar ColorsOther shades of Rose

rose-300#fda4af
rose-500#f43f5e
rose-200#fecdd3
rose-600#e11d48
rose-100#ffe4e6
rose-700#be123c

Complementary ColorsColors opposite on the hue wheel

teal-300#5eead4
teal-400#2dd4bf
teal-500#14b8a6
teal-600#0d9488
teal-700#0f766e
emerald-700#047857
emerald-600#059669
emerald-500#10b981

Full Rose Palette

50#fff1f2100#ffe4e6200#fecdd3300#fda4af400#fb7185500#f43f5e600#e11d48700#be123c800#9f1239900#881337950#4c0519