Molasses
#574a47
Deep gray-brown molasses tone for intimate UI panels
About Molasses
Molasses looks like a gray pulled through molasses, not paint. On a dark UI it lands mid-dark and soft, with a muted cocoa-brown undertone that never gets as steady-earthy as Mustang and doesn't feel as absorbed as Off the Beaten Path. Compared to Lynx, it's a touch more brown and carries a heavier, lees-like mood.
I use it as the background that supports content without turning into either ink-wash gloom or dusty neutrality. It shows up in dashboards and finance apps for reporting shells, filter bars, and card gutters where you want a calm base that still reads warm under long tables. It also works well in CMS side panels and moderation views for e-commerce, logistics reporting, and media back offices, especially when you need "grounded" instead of merely neutral. Pair it with off-white type and slightly cooler strokes so the brown stays controlled; if you go too light on highlights, it can feel a bit sticky.
For accents, keep browns and ambers minimal. Use muted olives or cool charcoal to prevent it from tipping fully into the Mustang side of the family.
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.