Color guide · Earth & brown colors

Chocolate Color

The CSS chocolate shade is a warm orange-brown. It is closer to an earthy accent than the dark brown many people picture when hearing chocolate. Use the digital anchor deliberately instead of assuming the name describes every cocoa product.

A warm orange-brown, lighter than a chocolate bar#D2691ECSS keyword: chocolate

Chocolate color codes

HEX#D2691E
RGBrgb(210, 105, 30)
HSLhsl(25, 75%, 47.1%)
CSS keywordchocolate

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes chocolate interesting?

Kew traces chocolate to cacao and the processing of its seeds. A finished bar has its own ingredients, texture and lighting; it is not a physical version of this CSS swatch. For food photography or packaging, sample the actual product and check a print proof rather than relying on the keyword.

Read the reference: Kew: where chocolate comes from ↗

Things with chocolate tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #D2691E match.

Illustrated placeholder · image coming later

Chocolate-bar inspiration

Actual bars often look much darker; the illustration uses a brown family rather than an exact match.

Illustrated placeholder · image coming later

Terracotta-style ceramics

Warm orange-brown surfaces can pair naturally with cream and leafy green.

Illustrated placeholder · image coming later

Dry leaf details

Dry leaves offer irregular warm browns, especially when combined with shadows and muted yellows.

A practical color study

Choose the material before the keyword

The word chocolate can suggest a dark food reference even though the CSS shade is orange-brown. Start with the object: cocoa packaging, a terracotta cup and a wooden prop need different textures and shadow colors. The shared warm family does not make them the same material.

For a food layout, sample a real product photo when accuracy matters. Use the named color as an accent if it supports the product, rather than forcing the product into the chosen palette.

Ideas for using chocolate

01

Web interfaces

Use chocolate as a warm accent on a cream panel. Keep long paragraphs in a dark neutral for dependable reading.

02

Game art

Try it as a midtone for wood, soil or leather, then add darker cracks and lighter edges.

03

Packaging

Build an earthy palette around the real product photo. Do not let an attractive swatch override the color of the item being sold.

Watch out: The name may imply a darker brown than the screen shows. Always share the hex value when coordinating a digital design.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring chocolate

Woodland Paper

Leaf green, warm earth and a light base

Explore palette →

Earthwork

Warm browns with an explicit dark outline

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

5.78:1 · AA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare chocolate with another color →

Questions about chocolate

Why is CSS chocolate so orange?

The keyword has the fixed value #D2691E. Everyday chocolate colors and commercial product colors cover other browns.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore earth & brown colors →

#228B22
Green colors

Forest Green

A medium green inspired by dense foliage

Explore color →
#FFFFF0
Light & dark neutrals

Ivory

A near-white with a small warm shift

Explore color →
#36454F
Light & dark neutrals

Charcoal

A dark blue-gray for text and structure

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide