Chocolate
#d2691e
Deep cocoa-orange for richer, darker yellow contrast
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 Cork Wood negotiates between warmth and restraint, and Brown Sugar Glaze 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 Carrot or the residual warmth Cork Wood 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.
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.