Emerald

HEX: #50C878 | Modern Palette

On White
2.13:1
FAIL
On Black
9.87:1
PASS

Color Specifications

HEX
#50C878
RGB
80, 200, 120
HSL
140°, 60% ,78%
CMYK
60, 0, 40, 21.57

About Emerald

Emerald (#50C878) is a color with RGB(80, 200, 120) and HSL(140°, 60%, 78.43%). In design, it fits Cool styles and is suitable for Text, Button, Accent. Its complementary color is #C850A0, which creates strong contrast. Its triadic palette includes #7850C8 and #C87850. The name comes from smaragdos (σμάραγδος) (Greek).

  • HEX: #50C878
  • RGB: 80, 200, 120
  • HSL: 140°, 60%, 78.43%
  • Style: Cool
  • Use case: Text, Button, Accent
  • Complementary color: #C850A0
  • Triadic colors: #7850C8, #C87850
  • The name comes from smaragdos (σμάραγδος) (Greek).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Emerald #50C878 is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
 
 
EMERALD
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
EMERALD
 
 
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
 
 
EMERALD
 
 
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
 
 
 
 
 

Color Harmonies

Emerald #50C878 pairs with #C850A0 as its complementary color, and #7850C8 and #C87850 in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

EMERALD
Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

EMERALD
Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

EMERALD
Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

EMERALD
Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

EMERALD
Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

EMERALD

Shades & Tints

The shade and tint range for Emerald #50C878 moves from dark #06130B tones through the base color to lighter #ECF9F0 tones, making it useful for depth, hierarchy, and background variation.

EMERALD

Color Characteristics

Mood
Style
Cool
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #B0B07B
Protanopia #BFBF77
Tritanopia #66C0C0
Achromatopsia #B2B2B2

Frequently Asked Questions

Emerald (#50C878) is a color with RGB(80, 200, 120) and HSL(140°, 60%, 78.43%).

#50C878 pairs strongly with #C850A0 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#50C878 is suitable for Text, Button, Accent and works well with Cool styles.

The name Emerald is linked to smaragdos (σμάραγδος) from Greek, meaning green gem.

Name, History & Etymology

Origin Word smaragdos (σμάραγδος)
Meaning green gem
Language Greek
First Recorded Use Antiquity (likely 4th millennium BCE for the gem, 14th century for the English word)

History

Emeralds have a rich history, prized by ancient civilizations including the Egyptians, Romans, Incas, and Mughals. Cleopatra was famously fond of emeralds. The Spanish conquistadors brought large quantities of emeralds from South America (particularly Colombia) to Europe in the 16th century, significantly increasing their availability and popularity. Historically, emeralds were believed to bestow various powers, including foresight, good fortune, and protection against evil. They were also used in medicine for their supposed healing properties.

First Recorded Use

The word 'emerald' entered English via Old French 'esmeraude' and Latin 'smaragdus', ultimately from Greek 'smaragdos'. The gem itself has been mined and valued for thousands of years, with the earliest known mines in Egypt dating back to at least 330 BCE, and possibly as early as 3500 BCE. The English word 'emerald' is attested from the late 14th century.

Cultural Associations

Emerald is the birthstone for May. It is traditionally given for 20th and 35th wedding anniversaries. The color 'emerald green' is widely recognized and associated with lushness, nature, and royalty. Famous emeralds include the Mogul Emerald (217.80 carats, inscribed with prayer texts) and the Chalk Emerald (37.82 carats, set in a ring surrounded by diamonds). In many cultures, emeralds symbolize rebirth, hope, and fertility.

Similar Named Colors
UFO Green #3CD070 ΔE 3.01
Fern #71BC78 ΔE 4.91
Mantis #74C365 ΔE 5.73
Medium Sea Green #3CB371 ΔE 6.11

Code Snippets

/* Background */
.element {
    background-color: #50C878;
}

/* Text */
.element {
    color: #50C878;
}

/* Border */
.element {
    border: 1px solid #50C878;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #50C878,
        #E9A7D3
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #50C878,
        #E9A7D3
    );
}

// SCSS variable
$emerald: #50C878;

// With RGB channels (useful for rgba() usage)
$emerald-r: 80;
$emerald-g: 200;
$emerald-b: 120;

// Usage
.element {
    background-color: $emerald;
    color: rgba($emerald-r, $emerald-g, $emerald-b, 0.8);
}