Metal Gear
#a2c3db
Softer steel-blue highlights for clear blue navigation
About Metal Gear
Metal Gear is the kind of blue you notice when a product screenshot looks "finished" without feeling loud. It has that cool, steel-tinted cast that sits between optimistic sky blues and the grayer service panels, so it reads engineered, not airy. Compared to Cloudy Valley, it holds more blue character and less weather-gray. Next to Life at Sea, it's less transparent and more purposeful, like it has weight.
I use it for dashboards and finance apps when I want the section surfaces to feel steady but not washed out, especially for card headers, table toolbars, and settings panels in SaaS. It also lands well in logistics and healthcare portals where you need calm organization rather than soft mist. Compared with Gentle Sky's gentle, retreating feel, Metal Gear stays more saturated and slightly colder, so it doesn't disappear behind the content.
Pair it with deep navy or near-black type for crisp separation, and avoid letting it sit beside too much pure white for long stretches, or it can feel a bit too "industrial" for the mood you want.
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.