← 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
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| green-50 | #f0fdf4 | rgb(240, 253, 244) | hsl(138, 76%, 97%) | oklch(0.982 0.018 155.826) | |
| green-100 | #dcfce7 | rgb(220, 252, 231) | hsl(141, 84%, 93%) | oklch(0.962 0.044 156.743) | |
| green-200 | #bbf7d0 | rgb(187, 247, 208) | hsl(141, 79%, 85%) | oklch(0.925 0.084 155.995) | |
| green-300 | #86efac | rgb(134, 239, 172) | hsl(142, 77%, 73%) | oklch(0.871 0.15 154.449) | |
| green-400 | #4ade80 | rgb(74, 222, 128) | hsl(142, 69%, 58%) | oklch(0.792 0.209 151.711) | |
| green-500 | #22c55e | rgb(34, 197, 94) | hsl(142, 71%, 45%) | oklch(0.723 0.219 149.579) | |
| green-600 | #16a34a | rgb(22, 163, 74) | hsl(142, 76%, 36%) | oklch(0.627 0.194 149.214) | |
| green-700 | #15803d | rgb(21, 128, 61) | hsl(142, 72%, 29%) | oklch(0.527 0.154 150.069) | |
| green-800 | #166534 | rgb(22, 101, 52) | hsl(143, 64%, 24%) | oklch(0.448 0.119 151.328) | |
| green-900 | #14532d | rgb(20, 83, 45) | hsl(144, 61%, 20%) | oklch(0.393 0.095 152.535) | |
| green-950 | #052e16 | rgb(5, 46, 22) | hsl(145, 80%, 10%) | oklch(0.266 0.065 152.934) |
Usage Examples
Background
bg-green-500Text
text-green-500Sample Text
Border
border-green-300Ring
ring-green-500Explore Other Colors
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Aa
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Aa
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow