Skip to main content
← Back to All Colors

Tailwind Green Color Palette

Natural and calming, the standard choice for success states and positive actions.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.

50
green-50
#f0fdf4
100
green-100
#dcfce7
200
green-200
#bbf7d0
300
green-300
#86efac
400
green-400
#4ade80
500
green-500
#22c55e
600
green-600
#16a34a
700
green-700
#15803d
800
green-800
#166534
900
green-900
#14532d
950
green-950
#052e16

Quick Reference

ShadeClassHEXRGBHSLOKLCH
green-50#f0fdf4rgb(240, 253, 244)hsl(138, 76%, 97%)oklch(0.982 0.018 155.826)
green-100#dcfce7rgb(220, 252, 231)hsl(141, 84%, 93%)oklch(0.962 0.044 156.743)
green-200#bbf7d0rgb(187, 247, 208)hsl(141, 79%, 85%)oklch(0.925 0.084 155.995)
green-300#86efacrgb(134, 239, 172)hsl(142, 77%, 73%)oklch(0.871 0.15 154.449)
green-400#4ade80rgb(74, 222, 128)hsl(142, 69%, 58%)oklch(0.792 0.209 151.711)
green-500#22c55ergb(34, 197, 94)hsl(142, 71%, 45%)oklch(0.723 0.219 149.579)
green-600#16a34argb(22, 163, 74)hsl(142, 76%, 36%)oklch(0.627 0.194 149.214)
green-700#15803drgb(21, 128, 61)hsl(142, 72%, 29%)oklch(0.527 0.154 150.069)
green-800#166534rgb(22, 101, 52)hsl(143, 64%, 24%)oklch(0.448 0.119 151.328)
green-900#14532drgb(20, 83, 45)hsl(144, 61%, 20%)oklch(0.393 0.095 152.535)
green-950#052e16rgb(5, 46, 22)hsl(145, 80%, 10%)oklch(0.266 0.065 152.934)

Usage Examples

Background

bg-green-500

Text

text-green-500

Sample Text

Border

border-green-300

Ring

ring-green-500