Tailwind Emerald
Emerald is a richer, slightly cooler green with a premium feel. It's a popular primary for finance, growth and wellness products where "trustworthy success" is the vibe.
Click any value to copy it. All 11 Emerald shades (50–950) in hex, OKLCH, RGB, HSL and Tailwind class.
| Swatch | Shade | Class | Hex | OKLCH | RGB | HSL |
|---|---|---|---|---|---|---|
| 50 | ||||||
| 100 | ||||||
| 200 | ||||||
| 300 | ||||||
| 400 | ||||||
| 500 | ||||||
| 600 | ||||||
| 700 | ||||||
| 800 | ||||||
| 900 | ||||||
| 950 |
Where to use Tailwind Emerald
- Primary buttons:
bg-emerald-600. - Positive metrics:
text-emerald-600. - Subtle surfaces:
bg-emerald-50.
Related Tailwind colors
Build a full theme from Emerald with the shadcn theme generator, or see the whole Tailwind colors palette.
Copied
