Dark emerald, bright emerald
The open colour-name list we use has two entries: “Emerald Green” at #046307 and plain “Emerald” at #028F1E. The first is the gemstone in shadow, the second the stone held up to light. Web designers today often mean something lighter and bluer still, because Tailwind's emerald scale has made that version familiar.
| Name | HEX | White text | Feel |
|---|---|---|---|
| Emerald Green | #046307 | 7.52:1 (AAA) | Luxurious, formal, close to bottle green |
| Emerald | #028F1E | 4.24:1 (large text) | Vivid jewel green |
| Tailwind emerald-500 | #10B981 | 2.54:1 (fails) | Fresh, minty, modern UI green |
Emerald was Pantone's Color of the Year for 2013, which helped make it a go-to jewel tone in fashion and interiors.
Emerald vs jade
Jade (#00A86B in the name list) is bluer, at hue 158°, and softer in feel; emerald sits close to pure green at 122–132°. Put side by side, emerald looks like a precious stone and jade looks like carved stone. Jade also needs dark text (black 6.81:1), while dark emerald takes white comfortably.
What to pair with emerald
- Gold: the obvious luxury pairing. Gold on dark emerald scores 5.36:1, enough for body text.
- Ivory: softer than white for invitations and menus.
- Burgundy: another jewel tone; strong for winter and holiday designs, but keep one dominant.
- Blush pink: the gentle opposite on the wheel, popular in weddings.
Questions
What is the RGB code for emerald green?
#046307 is rgb(4, 99, 7). The brighter #028F1E is rgb(2, 143, 30).
Which emerald should I use for a website?
For a background behind white text, the dark one. For icons and accents on a white page, the lighter ones look more lively. Compare against plain green if you are unsure how far to go.