#50C878Emerald Green hex code: #50C878 · RGB 80, 200, 120. Also called emerald.
Emerald green takes its name from the gemstone: a bright, saturated green with a slight blue lean. The common reference value is #50C878. Pantone named its own Emerald (17-5641) the Color of the Year for 2013, which pushed jewel-toned greens into fashion, interiors and branding.
Emerald signals growth, money and freshness, so it shows up in fintech, sustainability, health and premium retail. It's vivid enough to carry a primary button or highlight, and deeper emeralds read as luxurious on dark backgrounds.
The reference #50C878 is fairly light: black text passes on it, white text does not. For a white-label button use a deeper jewel emerald such as #007A5E. Pair emerald with gold, ivory or navy for a classic look; avoid putting it next to a pure red unless you want a holiday feel.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#50C878rgb(80, 200, 120) · reference#046307rgb(4, 99, 7) · HueWiz pick#009B77rgb(0, 155, 119) · HueWiz pick#A8E6BErgb(168, 230, 190) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with emerald green's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around emerald green.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#EEFBF1 · text #0F2515 · link #008340Spring collection
Designed around emerald green.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#09180D · text #E8F2E9 · link #50C878Hand-picked combinations that work with emerald green. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on emerald green | 2.12:1 | Fail | Fail |
| Black text on emerald green | 9.87:1 | AAA | AAA |
| Emerald Green text on white | 2.12:1 | Fail | Fail |
| Emerald Green text on near-black #111111 | 8.87:1 | AAA | AAA |
| White text on deeper emerald green #008742 | 4.62:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #50C878. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-emerald-green-50: #E4FFEA;
--color-emerald-green-100: #C0FFCF;
--color-emerald-green-200: #97F3B0;
--color-emerald-green-300: #74DD93;
--color-emerald-green-400: #4DC173;
--color-emerald-green-500: #3DA15F;
--color-emerald-green-600: #2F834C;
--color-emerald-green-700: #22693B;
--color-emerald-green-800: #16502B;
--color-emerald-green-900: #0B391C;
--color-emerald-green-950: #03230E;
--color-emerald-green: #50C878;
}:root {
--emerald-green: #50C878;
--emerald-green-rgb: 80 200 120;
--emerald-green-light: #C0FFCF;
--emerald-green-dark: #16502B;
}
.btn-emerald-green {
background: #008742;
color: #FFFFFF;
}Need semantic roles (surface, text, primary, accent) and exports? Open emerald green in the Tailwind color generator.
#50C878 is the value HueWiz uses for emerald green; it equals rgb(80, 200, 120). Other common versions include #046307 (deep emerald), #009B77 (jewel emerald), #A8E6BE (light emerald).
With an HSL hue of 140° and 52% saturation, emerald green reads as a cool green.
Use dark text. White on #50C878 measures 2.12:1 and black measures 9.87:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #008742.
Try emerald & gold (#046307, #50C878, #D4AF37); jewel tones (#009B77, #0047AB, #722F37); fresh fintech (#F5FBF7, #A8E6BE, #50C878). Each palette above can be copied or opened in the HueWiz studio.
Emerald Green isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.
#3CB371 · ΔE 6#66CDAA · ΔE 7#32CD32 · ΔE 8#8FBC8F · ΔE 8