Armour
#74857f
Muted cool steel gray for secondary UI surfaces
About Armour
Armour is the gray that sits between things. It's darker than Crown of Ash and Aluminium, but it doesn't lean into warmth the way Concrete Jungle does. There's a slight green undertone here that keeps it from feeling brown or earthy, which means it reads as composed without being cold. It's the kind of color that works because it doesn't demand attention.
Reach for it in product dashboards, data tools, and admin interfaces where you need a surface that holds its ground but doesn't muscle in on what matters. Sidebar backgrounds, secondary panels, form containers, anywhere you're building layers and need something that sits quietly between your content and the white space. It plays better with muted accents and desaturated palettes than with anything bright. In healthcare apps and internal platforms, it feels intentional without feeling institutional.
Pair it with deep text and it reads solid. The trick is not overthinking it, it's darker than Crown of Ash so it actually works as a secondary surface, but it's restrained enough that it won't fight for dominance like Concrete Jungle would. This is the gray you pick when you want the surface to disappear but not apologize for existing.
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.