Chocolate Color Chart: Cocoa, Caramel and Toffee Shades

Eric DawsonByEric Dawson Candy & Chocolate

A chocolate color chart covers a range of warm browns rather than one standardized swatch: Chocolate Brown is #411900 in ArtyClick, while Canva’s Chocolate is #7B3F00 and Figma’s is #713600. Dark Chocolate shifts toward reddish near-black at #2c0001, with alternatives such as brown-forward Raw Chocolate (#471700) and muted Chocolate Clay (#4a2e26).

For a useful palette, compare codes and undertones, then pair chocolate with cream, burnt orange, deep red, or forest green. Hazelnut offers a lighter comparison combining beige, tan, and light-brown tones. Caramel and toffee are descriptive labels rather than precise hex values.

What a Chocolate Color Chart Shows

A chocolate color chart shows a family of related warm browns, not one universally confirmed swatch. Named chocolate values range from #411900 to #7B3F00, while dark chocolate extends into reddish browns that approach black. Comparing labels, codes, and undertones makes those differences clearer than relying on the word “chocolate” alone. Each entry below keeps its published name and code together, with descriptive entries separated from colors that have confirmed numeric values.

Names matter because different color libraries use “chocolate” differently. Canva assigns Chocolate the code #7B3F00, while Figma uses #713600 for the same name. ArtyClick identifies its darker #411900 entry as Chocolate Brown.

Both Canva’s and Figma’s versions have no blue channel and full saturation, but they are not interchangeable numeric specifications. Neither naming choice establishes a universal standard, so a useful chart preserves these alternatives rather than declaring one the definitive chocolate.

Color Name Hex Code Chart Meaning
Chocolate #7B3F00 Canva’s general chocolate, described as representing milk chocolate.
Chocolate #713600 Figma’s warm brown positioned between red and yellow.
Chocolate Brown #411900 ArtyClick’s darker brown, with RGB values of 65, 25, 0.
Dark Chocolate #2c0001 Colorguide’s very dark reddish brown.
Hazelnut No confirmed code found Shutterstock describes a lighter blend of beige, tan, and light-brown tones.
Toffee No confirmed code found A descriptive label without a confirmed numeric assignment here.
Caramel No confirmed code found A descriptive label without a confirmed numeric assignment here.

Dark chocolate adds another distinction: depth does not erase undertone. Colorguide describes it as ranging from mahogany to near-black, with red or purple undertones that distinguish it from monochrome black or dark gray. Low light can make it appear black, while other examples look flatter and closer to dark umber. Those variations explain why a chart benefits from a separate dark-chocolate entry rather than treating every deep brown as the same color.

Hazelnut serves a different role in this comparison, providing a lighter descriptive reference instead of a numerically specified swatch. Toffee and caramel remain descriptive labels in this comparison. Leaving their code cells unassigned avoids suggesting a precision that has not been established. Such entries can sit beside coded chocolate colors, but their descriptive status should stay visible whenever the chart is used to compare or select shades.

Choosing among these entries starts with deciding which named brown matches the intended appearance. Figma’s chocolate resembles milk chocolate, whereas Colorguide’s Dark Chocolate occupies a much deeper reddish range. ArtyClick’s Chocolate Brown supplies another distinctly dark option without sharing that same code. Keeping the exact hex value beside the name makes the selection explicit and prevents the broad chocolate label from hiding meaningful differences in warmth and depth.

Chocolate and Chocolate Brown Codes

Chocolate and Chocolate Brown labels distinguish the options. No published standard confirms any of these as the universally definitive chocolate code, so the distinction rests on each label’s exact values rather than its name alone. Comparing their RGB and lightness figures makes the differences more explicit: the general Chocolate options are lighter than ArtyClick’s notably deep Chocolate Brown.

For Canva’s Chocolate, #7B3F00, the RGB breakdown is 48.2% red, 24.7% green, and 0% blue. Its hue is 30.7 degrees, with 100% saturation and 24.1% lightness. Those figures describe the lighter of these general Chocolate alternatives when compared with Figma’s listed lightness. Retaining the percentage format keeps Canva’s RGB specification intact, while the hex code provides the exact swatch identifier to carry into a palette or design specification.

Figma’s Chocolate, #713600, uses RGB 113, 54, 0 and is described as a warm brown between red and yellow. HSL values of 29 degrees, 100% saturation, and 22% lightness place it below Canva’s 24.1% lightness. Both Chocolate swatches have a zero blue channel and full saturation, but their separate hex values should remain attached to their names. Choosing #713600 therefore identifies Figma’s particular warm brown, not an interchangeable spelling of Canva’s #7B3F00.

For ArtyClick’s Chocolate Brown, #411900, the RGB values are 65, 25, 0, also expressed as 25% red, 10% green, and 0% blue. ArtyClick lists HSL values of 23 degrees, 98% saturation, and 13% lightness. Against Figma’s RGB 113, 54, 0, its lower red and green values make the numerical difference especially clear. That lower lightness also distinguishes Chocolate Brown from both general Chocolate entries, giving it the deepest position among these named alternatives.

Across these choices, lightness offers a useful comparison without making one label more authoritative than another. Keep the labels attached to their respective swatches. Rather than choosing by name alone, use the listed depth: Canva’s option is lighter, Figma’s is slightly deeper, and ArtyClick’s is darker still. Matching the label, hex code, and RGB specification keeps the selected version unambiguous.

Cocoa Undertones and Dark Chocolate Shades

Cocoa’s naturally reddish character helps explain why dark chocolate can lean toward mahogany rather than neutral black, while processing helps account for its darker variations. Dark chocolate spans very dark reddish brown to near-black, sometimes retaining red or purple undertones even when it looks black in low light. Colorguide also describes flatter versions that resemble dark umber more than black. For a chocolate palette, these distinctions make undertone as useful as depth: a near-black shade, a red-brown shade, and an earthy brown offer different starting points.

Processing changes the appearance of chocolate alongside its bitterness. Dutch processing, invented in 1828, makes chocolate darker and less bitter; Colorguide describes it as typical of mass-market chocolate, while some specialty products preserve more original bitterness. Bean variety and ingredients also affect the final color, as do fermentation, drying, roasting, and conching.

Canva describes unprocessed cocoa beans as deep red and notes that chocolate cakes were reddish before commercial processing. Neither description establishes a definitive cocoa hex code, so cocoa remains a descriptive reference here rather than a fixed numerical swatch.

Near-black examples include Colorguide’s Dark Chocolate, #2c0001, and Black Brown, #2a0401. Both provide starting points for the darkest part of a chocolate chart, but Dark Chocolate is specifically described as reddish brown. Its closeness to black does not erase that distinction: Colorguide lists black as its closest standard color, at 10.0% distance as of January 2026, while still identifying red or purple undertones.

Red-leaning Bitter Brown, #43000f, offers a more visibly red alternative within the dark-chocolate family. Raw Chocolate, #471700, takes a brown-forward direction instead, making it an earthy, less near-black step. Comparing these with #2c0001 separates redness from darkness without treating every deep shade as interchangeable. An umber-oriented choice can therefore follow the brown-forward example rather than the near-black one, while Bitter Brown suits a chart that needs its reddish character to remain more apparent.

Muted Chocolate Clay, #4a2e26, adds a softer, less saturated clay-brown option to this comparison. Rather than assigning every cocoa-related shade the same character, keep the distinctions visible in the labels: near-black Dark Chocolate, redder Bitter Brown, earthy Raw Chocolate, and muted Chocolate Clay. Together, these examples show the range behind dark-chocolate naming without turning cocoa’s natural redness or any single processing method into a universal color formula.

Where Caramel and Toffee Fit

Caramel and toffee color belong here as names to investigate alongside lighter chocolate options, not as swatches with confirmed numerical definitions. Neither receives an exact code here because no published figure reviewed confirms a hex, RGB, CMYK, HSL, HSV, or HSB value for either label. Leaving those entries unnumbered keeps the chart useful without making an unsupported match between a familiar color name and a particular brown.

Shutterstock describes it as a lighter brown combining beige, tan, and light-brown tones, but provides no numeric swatch for that comparison here. Its role is therefore descriptive: it gives readers language for considering a lighter direction without supplying a precise color specification. Treat that description as a comparison rather than a substitute definition for caramel or toffee.

For a chart that needs selectable colors, separate the name you want to explore from the code you can actually document. Figma lists lighter tints of its chocolate color, but does not name those steps caramel or toffee. Assigning either label to one of those tints would create a connection that Figma does not state. Keep documented tint names and codes intact, and leave unconfirmed names clearly marked rather than filling the gap by eye.

Readers interested specifically in toffee can continue to What Is Toffee Color? Shades, Codes and Pairings to explore that question further. Read the title as an invitation to examine the name, not as confirmation that a universal numerical definition has been established.

Any exact swatch still needs its own stated basis. Likewise, a pairing suggestion should not be mistaken for proof that the accompanying brown is definitively toffee rather than caramel or another named shade.

When assembling your palette, use hazelnut for the documented beige, tan, and light-brown comparison, and reserve exact specifications for colors with confirmed values. A note such as “no confirmed code here” is more accurate for caramel and toffee than an invented hex entry. Before choosing either name for a final chart, decide if you need a descriptive label or a reproducible color value; those are different decisions.

Lighter Tints and Muted Chocolate Tones

Figma’s lighter tints move from its #713600 chocolate base toward #FFC793, while its darker variations extend to #190C00. Chocolate Clay belongs to Colorguide’s dark-chocolate set rather than Figma’s tint sequence. Keep those labels and origins visible so a chart distinguishes lightening, darkening, and a muted alternative without treating them as interchangeable.

Across the lighter sequence, Figma lists #9A4A00, #C45D00, #ED7100, #FF8617, #FF9B40, #FFB16A, and #FFC793. Arrange these in the listed order beside #713600 to show the progression from the chocolate base through its lighter options. Each entry can retain the simple label “lighter tint” alongside its hex code. Neither caramel nor toffee is Figma’s name for these colors, so those terms should not replace the published tint labels.

For the darker side, use #643000, #582A00, #4B2400, #3F1E00, #321800, #261200, and #190C00. Placing this sequence alongside the lighter row makes the direction of change explicit without introducing additional shade names. Rather than assigning confectionery labels to individual steps, identify them as Figma’s darker chocolate variations. Such labeling preserves their relationship to #713600 and keeps the chart focused on reproducible values instead of descriptive names that have not been confirmed.

Figma lists muted tones #EF7710, #DF7520, #CF7430, #BF7440, #AF7550, #9F7860, and #8F7B70. Chocolate Clay offers a useful comparison with the lighter and darker rows: its published description is muted clay-brown, supporting a softer, less saturated dark-chocolate entry. However, presenting #4a2e26 as a Figma tone derived from #713600 would imply a relationship that has not been established. Label it separately as “Chocolate Clay” rather than inserting it into either numbered or sequential Figma progression.

Build the comparison around those distinct roles: a chocolate base, lighter tints, darker variations, and a separately labeled muted alternative. Preserve the hex code beside every entry, even when the accompanying description is simply “lighter tint” or “darker variation.” Keeping Chocolate Clay outside the Figma sequences allows the chart to compare softness with lightness and darkness without claiming that all three treatments come from one published scale.

Chocolate Color Pairings and Readable Contrast

Cream, burnt orange, deep red, and forest green pair with chocolate, while white provides the stronger measured text contrast against Chocolate Brown #411900. Black needs separate consideration: Canva advises against the pairing for mood reasons, and ArtyClick reports insufficient contrast between black and #411900 for readable text. Those recommendations address different questions, so a palette choice should not stand in for a readability check. Start with the recommended companions, then consider any text and background combination separately.

Canva recommends all four companions for its general chocolate color, #7B3F00. Cream belongs on that pairing list alongside burnt orange, deep red, and forest green, but the recommendation does not establish a text-contrast result for any of them. Choose among these colors as palette partners rather than treating their inclusion as an accessibility approval. Keep chocolate’s share of the palette restrained if following Canva’s styling advice: it recommends small doses because too much chocolate can appear drab or boring.

For measured readability, ArtyClick gives #411900 Chocolate Brown a contrast ratio of 15.4:1 with white. Its assessment says that combination meets AAA text-contrast requirements as of September 2026. Natural luminance for the same brown is reported at 2%, making the white comparison particularly useful when selecting text for this specific swatch.

Apply that result to #411900, not automatically to every color labeled chocolate, cocoa, or dark chocolate. A shared color-family name does not provide confirmation of an identical contrast ratio.

For that pairing, ArtyClick provides the relevant readability finding. That numerical finding is the reason to reject black text on this particular brown when readable text is the goal. Canva’s advice to avoid chocolate with black remains a separate stylistic judgment about the pairing’s mood. Neither statement should replace the other: mood advice does not measure legibility, and the measured result does not establish how every chocolate-and-black palette will feel.

Build the palette around those distinctions: use cream, burnt orange, deep red, or forest green as recommended companions, and retain white as the measured readable partner for #411900. No confirmed contrast figure is given here for cream or the other recommended companions against that brown. Before assigning any of them a text role, check the exact foreground and background codes rather than relying on the pairing recommendation alone. Treat the 15.4:1 white result and the insufficient 1.4:1 black result as specific to the named Chocolate Brown swatch.

I would let the measured contrast result settle the black versus white decision on Chocolate Brown. White text reaches 15.4:1 against #411900, while black reaches only 1.4:1, so white provides eleven times the listed contrast. That numerical gap outweighs the stylistic question of whether black might suit the palette. For body copy or any essential label, I would keep #411900 as a background color and choose white text, then reserve darker pairings for nonessential decorative use.

How to Choose Your Chocolate Palette

Choose your chocolate palette by fixing a named base code, comparing its undertones, and adding variations and companions around that exact brown. Keep readability checks separate from color pairing decisions, since a recommended companion does not establish text contrast.

Start with the role you want chocolate to play: a general warm brown, a redder dark shade, or a muted clay tone. Rather than collecting interchangeable chocolate names, use the following sequence to make each choice specific.

  1. Record the base name and code together. Use the earlier named chocolate comparison to choose your starting point rather than treating the labels as identical.
  2. Compare undertones before selecting depth. Bitter Brown #43000f offers a visibly redder direction, and Raw Chocolate #471700 gives a brown-forward alternative; see the earlier comparison for the softer Chocolate Clay option.
  3. Choose a darker variation or a lighter companion. Figma’s progression includes #643000, #582A00, and #4B2400, continuing through #3F1E00, #321800, #261200, and #190C00. Cream can serve as a lighter companion without being presented as a numerically defined chocolate tint.
  4. Add a pairing suited to your chosen direction. Burnt orange, deep red, forest green, and cream are Canva’s suggested companions; Figma identifies #FFCA99 as complementary to its #713600 chocolate.
  5. Check the limits of the stated contrast measurements. ArtyClick reports white at 15.4:1 and black at 1.4:1 against Chocolate Brown #411900, not against every shade carrying a chocolate name.

Keep any unnumbered shade labels descriptive until you have a confirmed code. Hazelnut describes beige, tan, and light-brown tones, but no numeric swatch is confirmed here; likewise, no published figure identified here confirms a toffee or caramel code.

Finish by retaining the exact codes beside your palette names, including any lighter companion or darker variation you select. Changing from general Chocolate to near-black Dark Chocolate #2c0001 changes the selected swatch, so do not carry the #411900 contrast figures over to that choice.

For ingredient choices rather than color choices, visit Best Chocolate Substitutes for Baking and Snacking. Keep that food decision separate from selecting a chocolate-colored design palette.

Frequently Asked Questions

Is There One Standard Hex Code for Chocolate Color?

No universal standard hex code is confirmed for chocolate color. Canva labels #7B3F00 Chocolate, Figma uses #713600 for Chocolate, and ArtyClick identifies #411900 as Chocolate Brown. These values are alternatives with distinct labels, not interchangeable definitions of one swatch.

How Does Chocolate Brown Differ from Dark Chocolate?

ArtyClick’s Chocolate Brown is #411900, while Colorguide’s Dark Chocolate is #2c0001, a very dark reddish brown approaching black. Dark Chocolate can appear black in low light but retains red or purple undertones. Colorguide also describes dark chocolate as sometimes closer to flat dark umber than black.

Does This Chart Assign Exact Codes to Toffee and Caramel?

Those labels remain gaps rather than assigned swatches.

Which Colors Pair Well with Chocolate Brown?

Cream, burnt orange, deep red, and forest green pair well with the warm chocolate-brown family. Canva recommends these pairings for its #7B3F00 Chocolate. Figma separately lists #FFCA99 as the complementary color for its #713600 Chocolate.

Is White or Black Text More Readable on #411900?

White text is more readable on #411900 Chocolate Brown, with a contrast ratio of 15.4:1 compared with black’s 1.4:1. ArtyClick reports that the white pairing meets AAA text-contrast requirements as of September 2026, while the black pairing is insufficient for readability.

Choose a chocolate shade by its code and undertone rather than its name alone. General Chocolate options include #7B3F00 and #713600, while #411900 Chocolate Brown and #2c0001 Dark Chocolate offer darker alternatives.

Cream, burnt orange, deep red, and forest green provide pairing options for the warm brown family. For text on #411900, favor white over black. Keep toffee and caramel labeled without exact codes until numeric definitions are confirmed, rather than treating descriptive names as precise swatches.

References

Sources read in September 2026.

Eric Dawson

I'm Eric Dawson, and I write The Money Watch from north Columbus, Ohio. Most of what I cover comes from my own life: renting, a 2014 Honda Fit, parking, computers, food and the bills behind all of it. I spent four years in an apartment-property office and eleven on a distributor's operations desk, reading leases and invoices. Where you need real information, I research the maker's or agency's own page and independent sources and report what they publish. I don't give tax, investment, legal or medical advice.