tailwind / rose

100

#FFE4E6

bg-rose-100

Color Codes

HEX#FFE4E6
RGBrgb(255, 228, 230)
HSLhsl(356, 100%, 95%)
OKLCHoklch(94.1% 0.0298 12.4)
R255
G228
B230
Hue356°
Saturation100%
Lightness95%
OKL94.1%
Chroma0.0298

Tailwind Classes

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

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-50#fff1f2
rose-200#fecdd3
rose-300#fda4af
rose-400#fb7185
rose-500#f43f5e
rose-600#e11d48

Complementary ColorsColors opposite on the hue wheel

teal-600#0d9488
teal-700#0f766e
teal-500#14b8a6
teal-400#2dd4bf
teal-300#5eead4
cyan-300#67e8f9
cyan-400#22d3ee
emerald-700#047857

Full Rose Palette

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