Mangrove
#757461
Soft olive-gray for grounded, map-like interfaces
About Mangrove
Mangrove is the gray I notice on weathered building trim that's been caught between sun and mist, not the crisp "clean" kind. It sits in the middle of gray, but the olive-brown undertone keeps it from turning cold, and the softness of the value stops it from feeling heavy.
Compared to Moon Base, it's less uniform and less dust-panel cool, more lived-in and gently tinted. It's also warmer than Armoury, so it doesn't try to vanish, and unlike Archaeology it doesn't lean into history-with-brown depth as strongly. I like it for admin tools and internal workflows where you want calm panels and legible hierarchy without the UI feeling clinical, especially in logistics dashboards for ports, fleet dispatch consoles, and newsroom asset management.
If you pair it with bright whites, keep the whites slightly warm; otherwise Mangrove can feel a little dull next to sharper highlights.
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.