Hazelnut Chocolate
#7b3f00
Soft, mid-dark hazelnut brown with golden lift
About Hazelnut Chocolate
Hazelnut Chocolate reads like a truffle bar right before it snaps. It's distinctly lighter than the deep browns in this band, with a cocoa-leaning warmth that feels dense but not "already underlit." Compared to Antique Brass, it's less coppery and more uniformly chocolate. Compared to Espresso Martini, it's less amber-bright and more mellow in the midtones, so it doesn't look glossy. And next to Cafe Royale, it pulls slightly toward neutral cocoa so it doesn't carry that extra red life.
I use it when the UI needs a brown that stays readable in the everyday light of product pages and content blocks: card headers, secondary buttons, and table highlights on cream backgrounds. In packaging and print, it's a good anchor for food, coffee, and bakery brands where you want depth without the heavy drop-off of Black Power or the darker, denser feel of Cafe Royale. It also behaves well for thumbnails and promo tiles in apps and e-commerce, where too-dark browns can flatten into the background.
Pair it with warm creams and light oat neutrals; cooler grays will drag the chocolate toward mud 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.
Similar colors
Create a gradient with Hazelnut Chocolate
Open the generator with this color pre-loaded.
Start creating