Emerald color guide
Vivid and slightly blue-leaning, it reads as success and confirmation almost automatically, which is useful and limiting in equal measure.
- Best for
- Positive states and growth-led marketing.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with emerald
Combinations that hold up in a real layout rather than only on the colour wheel.
Emerald color harmonies
Emerald shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Emerald FAQ
What is the hex code for emerald?
Emerald is #50C878. In other formats that is rgb(80, 200, 120), hsl(140, 52%, 55%), and approximately cmyk(60%, 0%, 40%, 22%) for print.
What colors go with emerald?
Charcoal, Cream, Gold all pair well with emerald. Positive states and growth-led marketing.
Is emerald accessible for text?
Not on white: emerald reaches only 2.13:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.
Should text on emerald be black or white?
Use black text. It gives the higher contrast ratio of the two against #50C878.