Milk Chocolate

#7f4e1e

Lighter milk-brown for softer, creamy warmth UI layers

Save
Share

About Milk Chocolate

Milk Chocolate reads like the first lick of cocoa on a spoon, not the shadow of it. It's medium-dark but noticeably smoother than the browns around it: more milk-warm and less red-edged than , less underlit than , and less shut-down than . Where those lean into either character, restraint, or austerity, this one lands as a digestible brown with a friendly, cocoa-colored undertone.

I like it for restaurant and heritage retail UI where you need brown that feels built, not just dark. Use it for card surfaces, primary button fills, and navigation accents that still need legibility on cream. It also holds up in packaging design and editorial layouts when you want crafted and approachable without tipping into clay softness or leather-like chill.

Quick pairing note: it prefers warm creams and off-whites. Next to cool grays it can look muted fast, so either keep the surrounding palette warm or let lighter yellows do the bridging.

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
6.97:1AAAAA Large

On Gray 100 #f5f5f5

Aa
6.40:1AAAAA Large

On Gray 900 #18181b

Aa
2.54:1Fail

On Black #000000

Aa
3.01:1FailAA Large

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.

Create a gradient with Milk Chocolate

Open the generator with this color pre-loaded.

Start creating