Hazel
#a36b4b
Muty hazelnut brown with muted olive-leaning warmth
About Hazel
I see Hazel as that mid-brown you notice when the palette stops being "golden" and starts getting earthy. It has warmth, but it reads hazel instead of straight caramel: a slightly muted, dusty softness that sits between brown and burnt orange without going fully saturated like Bourbon. Compared to Argan Oil, Hazel is a touch lighter and more alive. Compared to Ginger Dough, it's less bakery-sweet and more soil-tinted, so it feels steadier than dough.
I use it for food and beverage packaging when the design needs spice-colored warmth without tipping into bright orange. In UI, it's a strong card background or secondary surface, especially in dashboards where you want structure that won't compete. It's also a good choice for label pills, section tabs, and product detail panels that need a warm anchor without Copper's metallic punch.
Quick note: Hazel holds up next to cream, but if you pair it with very cool grays, it can look a bit flat. Keep the temperature warm and it works harder than it looks.
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.