Emerald Green Color

About emerald green

Emerald green is not a CSS named color. #50C878 is the value most often used for it: a lively, medium green with a cool blue lean, like the gemstone. Pantone named its own Emerald shade Color of the Year for 2013.

Real emeralds range from light to very deep greens, so many brands use darker emeralds for a richer look. The nearest CSS named color is mediumseagreen (#3CB371).

Emerald Green has no single standardized digital value and is not a CSS named color. #50C878 is a commonly used representative value; brands, paint and fabric makers use their own variations.

Other colors called emerald green

• Medium sea green (CSS) #3CB371The nearest CSS named color.Copy

Emerald Green shades and tints

Shades mix emerald green with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with emerald green

Color harmonies based on the hue of #50C878: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Emerald Green contrast and readability

On a emerald green background, black text reads best (9.87:1). Here is how emerald green works as a text color:

At this lightness, emerald works best with dark text or as an accent. For white text or green text on white, use a darker shade from the list below.

Using emerald green in CSS and HTML

:root {
  --color-emerald-green: #50C878;
}

.highlight {
  background-color: var(--color-emerald-green);
}

.banner {
  background-color: #50c878;
  color: #000000;
}

.label {
  color: #50C878;
  border: 2px solid rgb(80, 200, 120);
}

<p style="background-color: #50C878; color: #000000;">
  Emerald Green background
</p>