Chocolate color guide
A rich mid-brown with clear orange in it. Warm enough to feel appetising, dark enough to hold white text.
- Best for
- Food and drink brands, and warm dark surfaces.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with chocolate
Combinations that hold up in a real layout rather than only on the colour wheel.
Chocolate color harmonies
Chocolate shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Chocolate FAQ
What is the hex code for chocolate?
Chocolate is #7B3F00. In other formats that is rgb(123, 63, 0), hsl(31, 100%, 24%), and approximately cmyk(0%, 49%, 100%, 52%) for print.
What colors go with chocolate?
Cream, Gold, Sage Green all pair well with chocolate. Food and drink brands, and warm dark surfaces.
Is chocolate accessible for text?
Yes — chocolate text on white reaches 8.22:1, which passes WCAG AA for body text.
Should text on chocolate be black or white?
Use white text. It gives the higher contrast ratio of the two against #7B3F00.