Foil

#c0c3c4

Cool metallic light gray for crisp, modern UI layers

Save
Share

About Foil

Foil sits right in the middle of the gray spectrum, not trying to disappear like Breath of , not trying to assert itself like . It's genuinely neutral, the kind of color that works because there's nothing fighting you. No blue lean like , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
1.77:1Fail

On Gray 100 #f5f5f5

Aa
1.63:1Fail

On Gray 900 #18181b

Aa
9.99:1AAA

On Black #000000

Aa
11.84:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#c1c2c3
#c0c2c0
#bcc3c7
#c0c0c0
#c8c2be

Create a gradient with Foil

Open the generator with this color pre-loaded.

Start creating