Emerald

Meet Emerald (#50C878), a color that commands attention. Its striking quality lies in a unique balance of vivid green with a cool blue undertone. This combination gives it a rich depth that feels both lively and sophisticated, making it a compelling choice for any design palette.

What color is Emerald?

What is the meaning of Emerald?

How do I use Emerald (#50C878) in UI design?

Using Emerald color codes

Emerald

#50C878

Access our full UI & UX library today.

What color is Emerald?

What is the meaning of Emerald?

How do I use Emerald (#50C878) in UI design?

Using Emerald color codes

Emerald Code Conversions

HEX

#50C878

LAB

72, -51, 30

RGB

80, 200, 120

XYZ

27.4, 44.4, 24.9

HSL

140°, 52%, 55%

LCH

72, 60, 149°

HSB

140°, 60%, 78%

LUV

72, -52, 49

CMYK

60, 0, 40, 22

CMYK

60, 0, 40, 22

HWB

140°, 31%, 22%

Emerald Color Harmonies

Analogous

Analogous colors sit beside Emerald on the color wheel, creating a naturally harmonious and serene palette that brings a sense of calm.

#64C850

#50C878

#50C8B4

#64C850

#50C878

#50C8B4

Complementary

Complementary colors sit opposite each other on the color wheel. For Emerald, its complement creates a striking, high-contrast pairing perfect for catching attention.

#50C878

#C850A0

#50C878

#C850A0

Split Complementary

A split complementary scheme for Emerald uses the two colors adjacent to its direct complement, offering a vibrant yet balanced high-contrast palette.

#50C878

#B450C8

#C85064

#50C878

#B450C8

#C85064

Triadic

A triadic scheme pairs Emerald with two other colors equally spaced on the color wheel, creating a vibrant and balanced visual effect.

#50C878

#7850C8

#C87850

#50C878

#7850C8

#C87850

Tetradic

A tetradic scheme builds on Emerald with two complementary color pairs, creating a vibrant, balanced palette that offers maximum visual variety.

#50C878

#5064C8

#C850A0

#C8B450

#50C878

#5064C8

#C850A0

#C8B450

Square

A square color scheme pairs Emerald with three other colors, all equidistant on the color wheel, creating a vibrant and balanced high-contrast palette.

#50C878

#5064C8

#C850A0

#C8B450

#50C878

#5064C8

#C850A0

#C8B450

Emerald Contrast Simulation

Text Color

#

Background Color

#

9.87

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

9.87

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Emerald Color Variations

Shades

Shades are darker versions of Emerald made by adding black, creating depth and weight.

#50C878

#45AB67

#398F56

#2E7245

#225633

#173922

#0B1D11

#000000

#50C878

#45AB67

#398F56

#2E7245

#225633

#173922

#0B1D11

#000000

Tints

Tints are lighter variations of Emerald, created by adding white for a softer appearance.

#50C878

#69D08B

#82D89F

#9BE0B2

#B4E7C5

#CDEFD8

#E6F7EC

#FFFFFF

#50C878

#69D08B

#82D89F

#9BE0B2

#B4E7C5

#CDEFD8

#E6F7EC

#FFFFFF

Tones

Tones are created by adding gray to Emerald, resulting in softer, less saturated versions.

#50C878

#57BE79

#5EB37A

#65A97B

#6B9F7D

#72957E

#798A7F

#808080

#50C878

#57BE79

#5EB37A

#65A97B

#6B9F7D

#72957E

#798A7F

#808080

Hues

Hues are variations of Emerald that alter its intensity and warmth, creating different visual effects.

#50C878

#50BEC8

#5064C8

#9650C8

#C850A0

#C85A50

#C8B450

#82C850

#50C878

#50BEC8

#5064C8

#9650C8

#C850A0

#C85A50

#C8B450

#82C850

What Interfaces Use Colors Like Emerald?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox