Espresso Macchiato
#4f4744
Deeper espresso taupe gray for calmer contrast
About Espresso Macchiato
I keep thinking of espresso foam left too long under a lamp, that soft brown-gray haze you don't quite notice until you put it beside a cleaner neutral. Espresso Macchiato sits in the Gray family but it reads as darker and more muted than Chinotto, with less cool resolve and less brown sparkle than Chocolate Pretzel, and it never goes as heavy as Bark.
Use it when the interface needs warmth without tipping into "beige UI" territory. It's a good backdrop for admin consoles in e-commerce and logistics dashboards, CMS templates for editorial teams, and product documentation where dense text has to feel steady, not harsh. I like it as the base for form shells, side panels, and card gutters where you want personality without heat and grip without friendliness. Compared to Bark's authority, this one feels more conversational and slightly lower in saturation, so the one you reach for is the background that won't steal the spotlight.
Pair it with off-whites or charcoal for type. If you go too close to warm browns, it can flatten contrast and make icons feel less defined.
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.
Similar colors
Create a gradient with Espresso Macchiato
Open the generator with this color pre-loaded.
Start creating