Heavy Metal
#46473e
Cool, dense gray for steel-dark interfaces
About Heavy Metal
Heavy Metal is the gray you notice because it doesn't go soft or deep. It sits in the mid-dark range, with a muted, steady coolness that feels more mineral than smoky. Compared to Armadillo, it's darker and less "neutral steady," and compared to Black Olive and Black Panther, it keeps its gray identity without collapsing into near-black weight.
I use this for product chrome and content-heavy web dashboards where you want a background that calms the UI but still gives typography a clear stage. It's also great in media workflows like editorial proofing and video editing interfaces, especially when you're working with midtone imagery and don't want the backdrop to pull focus. Think of it as the one you reach for when you need contrast that feels controlled, not aggressive.
Pair it with clean off-whites or slightly warm grays. If you toss it next to very green-leaning olives, it can look a bit flatter, so watch your undertones.
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.