Metallic
#bcc3c7
About Metallic
Metallic reads like the gray you catch on a brushed metal rail, slightly more reflective and more dimensional than the flat middle-of-the-road greys. Compared to Foil's even neutrality, Metallic has a softer, slightly cooler cast and a touch more depth, so it doesn't just blend in. It feels more "finished" than "background," even when you keep it light.
I use Metallic for secondary surfaces in product UIs where you want separation without turning the whole layout blue. Think admin panels, data dashboards, and healthcare platforms that need clean form sections, dividers, and table backgrounds that look crisp in daytime lighting. It also holds up nicely in fintech and editorial interfaces when you pair it with darker text and stronger accent states, giving hierarchy without that slippery, refrigerator-door air of Icebreaker or the more workmanlike neutrality of Magnesium.
Quirk: keep an eye on saturation neighbors. If you stack it beside very cool teals and blues, it can look a bit too "metal" and flatten contrast, so I like to ground it with warmer grays or darker slate copy.
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.