Hazelnut Chocolate

#7b3f00

Soft, mid-dark hazelnut brown with golden lift

Save
Share

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 , it's less coppery and more uniformly chocolate. Compared to , it's less amber-bright and more mellow in the midtones, so it doesn't look glossy. And next to , 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 or the darker, denser feel of . 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
8.22:1AAA

On Gray 100 #f5f5f5

Aa
7.54:1AAA

On Gray 900 #18181b

Aa
2.15:1Fail

On Black #000000

Aa
2.55:1Fail

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

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