tailwind / green

50

#F0FDF4

bg-green-50

Color Codes

HEX#F0FDF4
RGBrgb(240, 253, 244)
HSLhsl(138, 76%, 97%)
OKLCHoklch(98.2% 0.018 156.1)
R240
G253
B244
Hue138°
Saturation76%
Lightness97%
OKL98.2%
Chroma0.018

Tailwind Classes

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

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 Green

green-100#dcfce7
green-200#bbf7d0
green-300#86efac
green-400#4ade80
green-500#22c55e
green-600#16a34a

Complementary ColorsColors opposite on the hue wheel

pink-300#f9a8d4
pink-400#f472b6
pink-500#ec4899
pink-600#db2777
pink-700#be185d
fuchsia-700#a21caf
fuchsia-600#c026d3
fuchsia-400#e879f9

Full Green Palette

50#f0fdf4100#dcfce7200#bbf7d0300#86efac400#4ade80500#22c55e600#16a34a700#15803d800#166534900#14532d950#052e16