Chocolate

#d2691e

Deep cocoa-orange for richer, darker yellow contrast

Save
Share

About Chocolate

Chocolate reads darker and heavier than anything else in this yellow family, it's the brown that actually committed to being brown, not the one still flirting with orange. Where negotiates between warmth and restraint, and leans into saturation, Chocolate just goes deeper. It's less about temperature play and more about actual depth. The kind of color that disappears into itself.

Reach for it in food and beverage design where you need authority without heat, product pages for premium goods, dark mode cards in cooking apps, or anywhere a rich brown backdrop needs to feel grounded instead of flashy. It works harder on navigation elements and section dividers than the lighter siblings do, there's real presence here without the announcement energy of 24 or the residual warmth carries. It's the button state that doesn't distract, the container that lets content breathe.

The catch: it's close enough in value to charcoal that pairing them requires intention. Against cream it can feel heavy-handed, so test it as a large container first. But next to warm neutrals like beige or soft gray, it settles into something almost luxe. It's the shade that works best when you actually want the color to recede.

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
3.63:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.33:1FailAA Large

On Gray 900 #18181b

Aa
4.88:1AAAAA Large

On Black #000000

Aa
5.78:1AAAAA 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.

Similar colors

#d26911
#cc6622
#d2663b
#c46d29
#dd6633

Create a gradient with Chocolate

Open the generator with this color pre-loaded.

Start creating