Cocoa Brown Color Codes: Comparing Reddish and Muted Shades with Color Swatches

Cocoa brown is a restrained brown with a reddish undertone, but the name does not refer to just one fixed HEX code on the web. Two published references use slightly different values, and shifting a sample toward rose or reducing its saturation creates more noticeable variations. This article compares the swatches and their color values, then shows how to use them on a hot-cocoa recipe page and a vintage stationery product page.

Compare published cocoa browns with redder and more muted variations

The Japanese color reference I-IRO describes Cocoa Brown as a dark grayish yellow-red and lists ■#74493A, with RGB values of red 116, green 73, and blue 58. Color-Site.com gives ■#875647, with RGB values red 135, green 86, and blue 71. Both are published examples under the same color name, but their numbers differ.

For comparison, we also created a rose-leaning version ■#A05B68 and a less saturated, grayer version ■#80716D. These last two are proposed design colors, not official Cocoa Brown values provided by those sources. HEX is a web color notation made from a hash sign and six hexadecimal digits. RGB represents the red, green, and blue components of light. HSL describes hue (the direction of the color), saturation (its vividness), and lightness (a mathematically defined brightness component).

The HSL values above were calculated from each HEX code and rounded to whole numbers. The two published cocoa browns ■#74493A and ■#875647 differ by only about 1.25:1 in contrast, so their relative brightness is very similar. The redder proposal ■#A05B68 shifts the hue toward rose-red, whereas the grayer proposal ■#80716D reduces HSL saturation to about 8%. Saturation is useful for discussing a muted appearance, but it does not fully predict how “dusty” a shade will look: hue, surroundings, and display conditions also matter.

Use the swatches on a cocoa recipe page and a vintage stationery catalog

Example A: a hot-cocoa recipe page.Give the main recipe heading a Cocoa Brown ■#74493A band using the I-IRO sample, with white ■#FFFFFF title lettering. That text-background pair has a contrast ratio of approximately 7.62:1. Put ingredients and steps on a light cream ■#F3E7D9 surface with dark charcoal ■#29262A text, reaching about 12.27:1. For a “View Ingredients” button, use a deeper brown ■#643C34 fill and white ■#FFFFFF text. The button lettering contrasts with its fill by about 9.38:1; the dark button fill contrasts with the surrounding cream by about 7.71:1. This keeps the cocoa-brown character in the heading while making longer instructions easier to follow on a light surface.

Example B: a vintage stationery product page.Use warm off-white ■#FAF5ED around product photography and descriptions, with charcoal ■#29262A body text. This text-background combination has approximately 13.77:1 contrast. For a more understated section, use the proposed grayer shade ■#80716D as a narrow decorative band, while keeping product names and prices in dark text. If you need a short “New Arrival” badge, consider the redder proposed shade ■#A05B68 with white ■#FFFFFF lettering. The badge text has about 5.01:1 contrast. Retain the words “New Arrival” rather than communicating product status through the color alone.

Example A makes the source-defined cocoa brown more prominent in a title band; Example B limits the grayer shade to decoration. Both are layout proposals to adjust for photographs and the amount of text, not claims that stronger redness is inherently better or lower saturation automatically looks more elegant.

Recheck text contrast whenever you change the shade or its background

With white ■#FFFFFF lettering, the I-IRO sample ■#74493A has approximately 7.62:1 contrast; the Color-Site.com sample ■#875647 has 6.08:1; the redder proposed version ■#A05B68 has 5.01:1; and the grayer proposed version ■#80716D has 4.67:1. All exceed the 4.5:1 minimum for normal-sized text at Level AA of WCAG (Web Content Accessibility Guidelines) 2.2, although the last combination has little margin. The minimum for large text is 3:1.

Changing the background can change the result even when the text color stays the same. I-IRO’s Cocoa Brown ■#74493A used as normal-sized text on cream ■#F3E7D9 reaches about 6.25:1, above the 4.5:1 normal-text minimum. On the lighter off-white ■#FAF5ED, the same brown reaches approximately 7.02:1. The proposed grayer shade ■#80716D on off-white ■#FAF5ED gives just 4.30:1, also below the normal-text minimum. A safer choice for body copy across the proposed pale backgrounds is dark charcoal ■#29262A, reserving the browns for bands and decorative details.

A contrast ratio measures the difference in relative luminance between two colors. Visual boundaries that are required to identify interface controls or states generally need at least 3:1 contrast against adjacent colors. The two published Cocoa Brown swatches contrast with each other by only about 1.25:1, so they should not be the sole indicator of different states. HueRoll lets you adjust colors through HEX input and check the selected shade against white or black. It cannot directly compare arbitrary color pairs or automatically determine WCAG conformance. All specific color-pair ratios in this article were calculated separately.