Ranch House
#7b645a
Softer, warmer ranch brown for calm layouts
About Ranch House
Ranch House looks like a terracotta ranch shed seen in late afternoon light. It has that steady, earthy orange-brown presence without drifting all the way into chocolate or rust. Compared to Chocolate Bliss, it doesn't get swallowed into a brown fog, and unlike Acorn it stays a touch more orange in temperature and less "serious shadow."
I reach for Ranch House in heritage food brands and craft beverage packaging when you want warmth that reads intentional, not subdued. It's also a strong pick for product detail pages and small UI accents, like pill buttons and link states, where warmth that holds its ground matters on both light and dark layouts. Against Annatto it feels gentler and more balanced, less heat-forward and more grounded.
One quirk: on near-white backgrounds it can show extra orange, so I usually temper it with cream or warm grays to keep it from feeling too "top layer" for body text. Pairing it with deeper charcoals works fast.
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.