Emerald
linear-gradient(160deg, #50C878, #228B22)
In the color library: emerald #50C878, forest green #228B22
Green gradient
Green gradients read as growth before any words arrive, which is why finance apps and grocery brands lean on them so hard. The eye also distinguishes more shades of green than of any other hue, so a green blend can travel a long way, mint to forest, and still look like one family rather than two colors negotiating.
5green gradients, ready to use
Emerald into forest is the definitive version, saturated at both ends so the midpoint never washes out. Mint runs the light half for backgrounds under dark text. Sea glass crosses into cyan, the neighbour green blends with most cleanly, and lime holds the yellow edge of the family for something louder.
Common questions
- What colors make a natural looking green gradient?
- Pairs the landscape actually produces: a leaf green into a forest green, or mint into emerald. Keep both stops on the same side of the family, blue-greens together or yellow-greens together; a blend across the whole family passes through an ambiguous zone that reads as neither.
- Why is green the hue with the most usable range?
- Human vision peaks in sensitivity around green wavelengths, so smaller differences remain distinguishable. Practically, that means a green gradient can span a wider lightness range than red or blue before the middle turns to sludge, and the emerald version above exploits exactly that.
- Do green gradients work for interfaces?
- Yes, with one caution: green is the strongest semantic color in software, meaning success, go, and money. A green gradient background quietly raises those expectations everywhere on the page, so keep it away from screens where errors and warnings need to land.
Other gradients
Share