Coffee
#6f4e37
Cooler coffee brown for restrained UI backgrounds
About Coffee
Coffee is the brown that actually warms up in your hand. It's got more red in it than Bison, more clay than Chocolate Bells, and it sits lighter than Chocolate Rain without losing any ground. This is what happens when a brown stops trying to disappear, there's real presence here, the kind that reads as approachable instead of austere.
Use it where you need brown to feel less like restraint and more like intentional choice. Restaurant menus, heritage packaging, editorial spreads, product interfaces where warmth matters. It works as body copy over cream, as card backgrounds that actually invite you in, as button states that feel deliberate rather than defaulted. It's the one you reach for when Cold Brew feels too withdrawn but Chocolate Bells already owns the room.
Pair it tight with warm creams and off-whites and it'll hold steady without needing to whisper. Cool grays will still flatten it, that's the family curse, but Coffee at least fights back a little harder than its muted neighbors.
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.