Smokescreen
#5e5755
Low-chroma smoke gray, cooler and flatter than nearby browns
About Smokescreen
I think of Smokescreen as the gray you pick when you want the page to feel settled, not heavy. It sits just a touch lighter than Bark-style depth, but it doesn't drift dusty like Lynx. There's a restrained, smoky undertone that keeps it from going true neutral, and the saturation stays low enough that it never turns into a brown-leaning fallback.
For me, it's the one for media skins and product pages that need calm authority. Use it as the backdrop for marketing layouts, editorial landing screens, and documentation sites where you've got dense screenshots and mixed typography. It also works in admin surfaces where you want the interface to read clean without looking sterile, especially alongside cool blues and muted greens.
One quirk: because it's lighter than the darker corner grays, pure white text can feel a little too sharp. I'd rather nudge toward soft near-whites and use charcoal strokes for UI dividers.
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.