← Back to All Colors
Tailwind Emerald Color Palette
Sophisticated green variant, popular for modern and professional interfaces.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
emerald-50
#ecfdf5
100
emerald-100
#d1fae5
200
emerald-200
#a7f3d0
300
emerald-300
#6ee7b7
400
emerald-400
#34d399
500
emerald-500
#10b981
600
emerald-600
#059669
700
emerald-700
#047857
800
emerald-800
#065f46
900
emerald-900
#064e3b
950
emerald-950
#022c22
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| emerald-50 | #ecfdf5 | rgb(236, 253, 245) | hsl(152, 81%, 96%) | oklch(0.979 0.021 166.113) | |
| emerald-100 | #d1fae5 | rgb(209, 250, 229) | hsl(149, 80%, 90%) | oklch(0.95 0.052 163.051) | |
| emerald-200 | #a7f3d0 | rgb(167, 243, 208) | hsl(152, 76%, 80%) | oklch(0.905 0.093 164.15) | |
| emerald-300 | #6ee7b7 | rgb(110, 231, 183) | hsl(156, 72%, 67%) | oklch(0.845 0.143 164.978) | |
| emerald-400 | #34d399 | rgb(52, 211, 153) | hsl(158, 64%, 52%) | oklch(0.765 0.177 163.223) | |
| emerald-500 | #10b981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) | oklch(0.696 0.17 162.48) | |
| emerald-600 | #059669 | rgb(5, 150, 105) | hsl(161, 94%, 30%) | oklch(0.596 0.145 163.225) | |
| emerald-700 | #047857 | rgb(4, 120, 87) | hsl(163, 94%, 24%) | oklch(0.508 0.118 165.612) | |
| emerald-800 | #065f46 | rgb(6, 95, 70) | hsl(163, 88%, 20%) | oklch(0.432 0.095 166.913) | |
| emerald-900 | #064e3b | rgb(6, 78, 59) | hsl(164, 86%, 16%) | oklch(0.378 0.077 168.94) | |
| emerald-950 | #022c22 | rgb(2, 44, 34) | hsl(166, 91%, 9%) | oklch(0.262 0.051 172.552) |
Usage Examples
Background
bg-emerald-500Text
text-emerald-500Sample Text
Border
border-emerald-300Ring
ring-emerald-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