Masala
#57534b
Warm dusty gray-brown for softer, lived-in UI balance
About Masala
Masala reads like the underside of a well-worn slate tile, not quite smoky, not quite warm earth. In a dark UI mock it feels a bit softer than Heavy Charcoal, but with more presence than Iron, like it's gently tinted instead of purely neutral.
I use it when the background needs to hold attention just enough to keep layouts from looking washed out, especially in admin dashboards, newsroom content systems, and ticketing platforms where tables and dense status text have to stay legible without going cold. Compared to Metropolis, Masala hangs onto a steadier gray-brown warmth, so photography doesn't look bluish and controls feel less severe. It's my mid-gray anchor for product shells that sit between "serious" and "friendly," and it's warmer than pure steel-gray without turning dusty.
Pair it with off-whites or cocoa-tinted grays for headers and it stays cohesive; put it next to very icy blues and it can start to look slightly muddier than you planned.
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.