Uwarp

Emerald green color

Emerald green is #50C878. Copy the codes, shades, and contrast below.

Build shades

Codes

This name is not a CSS keyword. Set the hex in stylesheets.

  • HEX#50C878
  • RGB80, 200, 120
  • HSL140, 52%, 55%
  • CMYK60, 0, 40, 22

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #50C878.

  • 08140C

  • 102818

  • 183C24

  • 205030

  • 28643C

  • 307848

  • 388C54

  • 40A060

  • 48B46C

  • Base

  • 62CE86

  • 73D393

  • 85D9A1

  • 96DEAE

  • A8E4BC

  • B9E9C9

  • CBEFD7

  • DCF4E4

  • EEFAF2

Palettes from this hex

Hue rotations of #50C878. Open the scheme generator to edit a set.

Open scheme generator

  • Complementary

    • #51C878
    • #C851A0

  • Analogous

    • #64C851
    • #51C878
    • #51C8B4

  • Triadic

    • #51C878
    • #7851C8
    • #C87851

  • Tetradic

    • #51C878
    • #5164C8
    • #C851A0
    • #C8B451

Contrast

Ratios use #50C878 against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

Open contrast checker

  • On white

    2.13:1

    Fails AA

  • On near-black

    8.51:1

    AAA

  • White text on this color

    2.13:1

    Fails AA

  • Near-black text on this color

    8.51:1

    AAA

How to use emerald green

Emerald green on this page is #50C878, the bright green commonly listed for the gemstone color and repeated in Wikipedia color tables from Maerz and Paul. It is not a CSS keyword. The CSS keyword green is #008000, which is darker and duller. If a design says emerald and a stylesheet says green, they are not the same chip.

#50C878 sits in the middle of the lightness range. It often fails as small text on white and fails as a background for white text. Use it for large type, icons, and fills, and take body text from a darker ramp step or from the dark green page. The hue is a yellow-green, so it stays botanical rather than teal. Sage (#BCB88A) is the muted version of a similar idea and works as a background behind an emerald accent. Do not put both at full size in one banner. Name the token emerald and keep green for the CSS keyword so the two do not get swapped in review.

Nearby colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.

Sources

Where this swatch and the CSS keyword note come from.