Colors EncyclopediaNamed color
Emerald
Emerald color #50C878: RGB 80, 200, 120 and HSL 140°, 52%, 55%. Explore its cool green profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Emerald
Open a professional color tool with #50C878 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Emerald and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-emerald: #50C878;
.bg-emerald { background-color: #50C878; }
.text-emerald { color: #50C878; }Color history, meaning and use · Editorially reviewed
About Emerald Color
Emerald is the green to bluish-green variety of beryl. Its color comes from trace elements including chromium, vanadium, and iron, with their relative presence influencing the exact appearance. Gemological sources also note that the boundary between pale green beryl and emerald is not defined by one universal screen color.
Digital Emerald is a saturated green with a gemstone association, useful for premium accents, financial interfaces, and botanical palettes. Physical emeralds add transparency, inclusions, cut, and lighting to the color experience; these cannot be recreated by filling a flat rectangle with HEX. Pairing with very dark green can create depth while pale neutrals preserve its chromatic clarity.
The HEX value is a design reference, not a gemological grade, origin determination, or substitute for examining an emerald.
WCAG Accessibility
Contrast checks for Emerald against black and white text.
Black text9.87:1AA Pass
White text2.13:1AA Fail
Downloadable color reference infographic
Emerald Color Reference Infographic
Save a high-resolution infographic of Emerald, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.4437
Black text9.87:1AA Pass
White text2.13:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#50C878",
"rgb": [
80,
200,
120
],
"hsl": [
140,
52,
55
],
"cmyk": [
60,
0,
40,
22
],
"luminance": 0.4437,
"contrast": {
"black": 9.87,
"white": 2.13
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
}Harmonies
{
"complementary": "#C851A0",
"analogous": [
"#64C851",
"#51C8B4"
],
"triadic": [
"#7851C8",
"#C87851"
],
"tetradic": [
"#5164C8",
"#C851A0",
"#C8B451"
],
"splitComplementary": [
"#B451C8",
"#C85164"
],
"monochromatic": [
"#96DEAE",
"#50C878",
"#2D8F4E"
]
}Variants
{
"light": "#96DEAE",
"dark": "#2D8F4E",
"saturated": "#37E170",
"desaturated": "#6AAF81",
"pastel": "#B9DFC6",
"neon": "#42FF81"
}Pairings
{
"best": [
"#000000",
"#C851A0",
"#64C851",
"#51C8B4"
],
"avoid": [
"#6AAF81",
"#96DEAE"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#96DEAE",
"#6AAF81"
]
}Knowledge graph
{
"nearestColors": [
"paris-green",
"medium-sea-green",
"medium-aquamarine",
"verdigris",
"cadet-blue"
],
"generatedPalettes": [
"emerald"
],
"generatedComparisons": [
"emerald-vs-medium-sea-green",
"emerald-vs-paris-green"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/earth-tone"
],
"relatedTools": [
"/harmonies/emerald",
"/wcag/emerald",
"/css/colors/emerald",
"/hex/50c878",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/earth-tone"
],
"narrower": [
"/palettes/emerald"
],
"related": [
"/colors/paris-green",
"/colors/medium-sea-green",
"/colors/medium-aquamarine",
"/colors/verdigris",
"/colors/cadet-blue",
"/compare/emerald-vs-medium-sea-green",
"/compare/emerald-vs-paris-green",
"/harmonies/emerald",
"/wcag/emerald",
"/css/colors/emerald",
"/hex/50c878",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "emerald",
"name": "Emerald",
"hex": "#50C878",
"uses": [
"natural palettes",
"wellness branding",
"sustainability design"
],
"psychology": {
"associations": [
"nature",
"growth",
"balance"
],
"contexts": [
"wellness",
"outdoor brands",
"gardening",
"organic products"
],
"avoidIn": [
"urgent error states"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design and editorial color systems."
},
"family": "green",
"temperature": "cool",
"tone": [
"earth-tone"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"green",
"cool",
"earth-tone",
"natural-palettes",
"wellness-branding",
"sustainability-design",
"nature",
"growth",
"balance"
],
"popularity": 84,
"rgb": [
80,
200,
120
],
"hsl": [
140,
52,
55
],
"cmyk": [
60,
0,
40,
22
],
"luminance": 0.4437,
"contrast": {
"black": 9.87,
"white": 2.13
},
"harmonies": {
"complementary": "#C851A0",
"analogous": [
"#64C851",
"#51C8B4"
],
"triadic": [
"#7851C8",
"#C87851"
],
"tetradic": [
"#5164C8",
"#C851A0",
"#C8B451"
],
"splitComplementary": [
"#B451C8",
"#C85164"
],
"monochromatic": [
"#96DEAE",
"#50C878",
"#2D8F4E"
]
},
"variants": {
"light": "#96DEAE",
"dark": "#2D8F4E",
"saturated": "#37E170",
"desaturated": "#6AAF81",
"pastel": "#B9DFC6",
"neon": "#42FF81"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
},
"css": {
"variable": "--color-emerald: #50C878;",
"utility": ".bg-emerald { background-color: #50C878; }",
"textUtility": ".text-emerald { color: #50C878; }"
},
"nearestColors": [
"paris-green",
"medium-sea-green",
"medium-aquamarine",
"verdigris",
"cadet-blue"
],
"generatedPalettes": [
"emerald"
],
"generatedComparisons": [
"emerald-vs-medium-sea-green",
"emerald-vs-paris-green"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/earth-tone"
],
"relatedTools": [
"/harmonies/emerald",
"/wcag/emerald",
"/css/colors/emerald",
"/hex/50c878",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/cool",
"/colors/by-tone/earth-tone"
],
"narrower": [
"/palettes/emerald"
],
"related": [
"/colors/paris-green",
"/colors/medium-sea-green",
"/colors/medium-aquamarine",
"/colors/verdigris",
"/colors/cadet-blue",
"/compare/emerald-vs-medium-sea-green",
"/compare/emerald-vs-paris-green",
"/harmonies/emerald",
"/wcag/emerald",
"/css/colors/emerald",
"/hex/50c878",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#C851A0",
"#64C851",
"#51C8B4"
],
"avoid": [
"#6AAF81",
"#96DEAE"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#96DEAE",
"#6AAF81"
]
}
}