tailwind / rose

700

#BE123C

bg-rose-700

Color Codes

HEX#BE123C
RGBrgb(190, 18, 60)
HSLhsl(345, 83%, 41%)
OKLCHoklch(51.4% 0.1978 16.9)
R190
G18
B60
Hue345°
Saturation83%
Lightness41%
OKL51.4%
Chroma0.1978

Tailwind Classes

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

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-600#e11d48
rose-800#9f1239
rose-500#f43f5e
rose-900#881337
rose-950#4c0519
rose-400#fb7185

Complementary ColorsColors opposite on the hue wheel

emerald-700#047857
emerald-600#059669
emerald-500#10b981
teal-300#5eead4
emerald-400#34d399
teal-400#2dd4bf
teal-500#14b8a6
emerald-300#6ee7b7

Full Rose Palette

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