Hot Chocolate

#683939

Deep cocoa brown with softer, balanced orange warmth

Save
Share

About Hot Chocolate

I think of Hot Chocolate as the color of the foam that's cooled down. It's not brick-red or wine-heavy, more like a cocoa-brown that still holds onto orange warmth, without sliding into gray-brown. Compared with 's red-leaning wine undertone, this one turns more neutral-brown and stays grounded. And unlike , it never gets that dense, almost opaque punch.

In practice, the one you reach for when you want warmth with softness: storefront labels, tea and dessert packaging, and the brown accents that sit well behind product photos. It also plays nicely in UI where a pure brown would look flat, like checkout surfaces, callouts, and secondary chart lines in retail dashboards and e-commerce. With Chocolate Truffle, the key difference is that Hot Chocolate keeps more orange heat and reads richer, not desaturated.

One quirk: it can look a touch muddy next to very cool grays. I usually fix that by pairing it with creams or warm neutrals so the orange undertone stays legible.

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
9.40:1AAA

On Gray 100 #f5f5f5

Aa
8.63:1AAA

On Gray 900 #18181b

Aa
1.88:1Fail

On Black #000000

Aa
2.23: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 Hot Chocolate

Open the generator with this color pre-loaded.

Start creating