Opal Green
#157954
Cool, translucent green for clean overlays
About Opal Green
Opal Green reads like a softer, misted-out leaf color rather than a flat "green button." Next to Amazon, it's noticeably more desaturated and a touch lighter, so it doesn't carry that product-clean certainty. And compared to Greasy Greens, it's not slick or heavy, just calmer and more breathable.
I use Opal Green when the UI needs green that feels light but still plant-forward, especially in green-leaning filters, sustainability reporting layouts, ingredient and batch tags, and product settings for outdoors or materials brands. It sits somewhere between Gale of the Wind's cooler teal tilt and the warmer work-greens, but stays more neutral overall, which helps it look consistent over both photos and pale surfaces. In data views, it's great for progress indicators that shouldn't feel too assertive.
Pair it with warm off-whites, oatmeal neutrals, or soft clay grays. Stay away from icy blues nearby, since the slight neutrality can make the whole cluster look cooler than you meant.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.