Emerald

#50C878

What color is Emerald?

Emerald is a rich, medium-dark green with a bright, slightly cool tone, hex #50C878, close to the color of a fresh-cut emerald gemstone. The color has a clarity to it that reads as vivid without being neon, sitting deeper than lime but lighter than forest green.

What is the meaning of the color Emerald?

Ancient Egyptians mined emeralds near the Red Sea as early as 1500 BCE, prizing the stone as a symbol of fertility and eternal life. The color name entered English in the 13th century through the Old French esmeralde, derived from the Greek smaragdos. By the 19th century, emerald green became a fashionable pigment in European painting and textile dyeing, though its arsenic-based formula made it toxic. The Pantone Color Institute named Emerald its Color of the Year in 2013, describing it as a color of growth and harmony.

RGB
80, 200, 120
HSL
140°, 52%, 55%
CMYK
60, 0, 40, 22
HSV
140°, 60%, 78%
Emerald color

What colors go with Emerald?

Colors that pair well with Emerald include:
Gold: rich, warm contrast
Navy: deep, grounded balance
White: clean, bright lift
Blush Pink: soft, unexpected warmth
Charcoal: dark, modern depth

Similar Colors

Conversions & Codes

Format Value CSS
HEX #50C878 color: #50C878;
RGB 80, 200, 120 color: rgb(80, 200, 120);
RGB Percentage 31%, 78%, 47% color: rgb(31%, 78%, 47%);
CMYK 60%, 0%, 40%, 22% Not supported in CSS
HSL 140°, 52%, 55% color: hsl(140, 52%, 55%);
HSV 140°, 60%, 78% Not supported in CSS
CIE-LAB 44, -24, 27 color: lab(44% -24 27);
Decimal 5294200 Not supported in CSS

Color Variations

Shades

#51C878
#3DC068
#36AB5D
#2F9551
#288046
#226B3A
#1B552E
#144023

Tints

#CBEED7
#B9E9C9
#A8E3BC
#96DEAE
#85D8A1
#73D393
#62CD86
#51C878

Tones

#51C878
#57C27A
#5DBC7C
#62B67E
#68B080
#6EAA82
#74A484
#7A9E86

Hues

#51C878
#51BEC8
#5164C8
#9651C8
#C851A0
#C85B51
#C8B451
#82C851

Color Harmonies

Analogous

#64C851
Click to copy
#50C878
Click to copy
#51C8B4
Click to copy

Complementary

#50C878
Click to copy
#C851A0
Click to copy

Split Complementary

#50C878
Click to copy
#B451C8
Click to copy
#C85164
Click to copy

Triadic

#50C878
Click to copy
#7851C8
Click to copy
#C87851
Click to copy

Tetradic

#50C878
Click to copy
#5164C8
Click to copy
#C851A0
Click to copy
#C8B451
Click to copy

Square

#50C878
Click to copy
#5164C8
Click to copy
#C851A0
Click to copy
#C8B451
Click to copy

CSS & Dev Snippets

CSS
.emerald {
  color: #50C878;
}
SCSS
$emerald: #50C878;
RGB
rgb(80, 200, 120)

Accessibility & Contrast

White background

2.13:1
2.13
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

9.87:1
9.87
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags