Foil
#c0c3c4
Cool metallic light gray for crisp, modern UI layers
About Foil
Foil sits right in the middle of the gray spectrum, not trying to disappear like Breath of Fresh Air, not trying to assert itself like Casper. It's genuinely neutral, the kind of color that works because there's nothing fighting you. No blue lean like Getting Wet, no weight-without-warmth attitude. Just even, settled gray.
Use it for secondary surfaces in product UIs where you need a visible break from white without introducing temperature: form fields, dividers, subtle background separation in dashboards, admin panels, healthcare apps. It's comfortable enough for editorial layouts, substantial enough for data tables, approachable enough that pairing it with almost anything doesn't create tension. This is the one you reach for when the other grays feel like they're either too committed or not committed enough.
The catch: because it's so perfectly middle-of-the-road, it can vanish if you don't give it enough contrast or enough company. Pair it with deep text, strong accents, or generous white space and it holds its ground. Pair it with nothing but mid-tone colors and you'll wonder where your hierarchy went.
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.