Interior design briefs say "warm neutral." The client means something different from what you envision. One person's warm beige is another person's cream, and neither matches what the paint chip on the wall actually reads under afternoon light. Brown color names cover the widest neutral territory in design vocabulary and also the most imprecise.
The brown family ranges from near-white cream through tan, caramel, sienna, mahogany, and down to near-black espresso. Each step has names that carry specific information about warmth, undertone, and depth, but those names overlap significantly across industries. What a makeup brand calls "warm beige" and what an interior designer calls "warm beige" are often different hex values. The color name finder matches any hex code against all 140 CSS named colors, which includes more brown-family names than most designers realize, from tan (#D2B48C) and sienna (#A0522D) to wheat (#F5DEB3) and peru (#CD853F).
This guide covers the complete earth tone naming vocabulary from the palest cream to deep espresso, with hex codes, CSS named color matches, and the naming conventions used in interior design, fashion, and cosmetics.
How Brown Color Names Are Organized
Brown colors are classified along three axes: depth (how light or dark), warmth (yellow-red warmth vs. gray-cool neutrality), and saturation (how vivid or muted).
Most brown naming in design uses depth as the primary axis: cream and ivory for the palest, beige and tan for light, caramel and honey for medium, chocolate and mahogany for deep, espresso for deepest. Undertone is the secondary dimension that creates subcategories within each depth level. Warm browns lean toward yellow or orange-red. Cool browns lean toward gray. Reddish browns lean toward sienna and terracotta.
The naming becomes more precise when both depth and undertone are stated. "Dark brown" tells you depth. "Dark warm reddish brown" tells you where in the dark brown range you are. Mahogany, espresso, and dark walnut can all be "dark brown" in casual use but they read as different colors in design work.
Light Brown Color Names: Beige, Tan, and Sand
Beige: A light neutral to warm-neutral color sitting between white and tan. CSS beige is #F5F5DC, a very pale warm cream. In common use, beige covers a wider range from pale neutral (#F0EAD6) to a more visible warm brown (#E0C898). Beige carries a "safe, neutral" implication in interior design that has made it both ubiquitous and occasionally pejorative.
Tan: A warm, clearly brown light color. CSS tan is #D2B48C, one of the few CSS colors that accurately matches everyday use of the word. Tan implies a distinctly golden warmth that beige does not always carry. In fashion, tan describes clothing in this range. In skincare and makeup, tan often refers to medium skin tones in this color neighborhood.
Sand: A warm neutral pale brown, slightly more golden than beige, approximately #C2B280. Sand in design implies a natural, outdoor warmth. It is used in coastal and Mediterranean interior palettes.
Khaki: CSS khaki (#F0E68C) is a pale yellow, much lighter than the fabric color most people call khaki. The fabric and fashion meaning of khaki describes a warm tan-brown, approximately #C3B091. This is a case where the CSS named color diverges significantly from the everyday meaning.
Buff: A warm, slightly golden pale brown, approximately #F0DC82 to #DAA06D depending on context. In art supply vocabulary, buff describes a specific pale warm yellow-cream used as a mid-tone.
Wheat: CSS wheat (#F5DEB3) is a very light warm tan, the color of dried wheat stalks. Pale and warm, it sits just below cream in depth and just above sand in warmth.
Cream and Off-White Color Names
Cream: A warm pale off-white with a visible yellow undertone. In CSS, the closest values are cornsilk (#FFF8DC), lemon chiffon (#FFFACD), or the custom range #FFFDD0 to #FFFACD. Cream in interior design describes a warm white that reads as intentionally off-white without being beige.
Ivory: CSS ivory (#FFFFF0) is a near-white with a slight cool quality, less yellow than cream. In fashion, ivory is the standard term for off-white in wedding wear and formal clothing. The distinction from cream is the temperature: ivory is cooler, cream is warmer.
Linen: CSS linen (#FAF0E6) is a pale warm off-white that accurately represents the color of natural unbleached linen fabric. It has warmth without appearing yellow.
Bisque: CSS bisque (#FFE4C4) is a pale warm peach-cream. It sits at the edge of the cream-into-peach range and is one of the more distinctly warm CSS off-whites.
Eggshell: Not a CSS named color, but widely used in paint vocabulary. Eggshell describes a near-white with a faint warm or blue undertone depending on the manufacturer. Most paint eggshell falls around #F0EAE0 to #F5F0E8.
Parchment: A warm cream with a slight yellow-brown quality, suggesting aged paper. Approximate hex: #F2E8C9. Common in heritage and vintage design palettes.
Medium Brown Color Names: Caramel, Toffee, and Mocha
Caramel: A warm medium brown with golden-amber undertones, approximately #C68642. Caramel appears in makeup (foundation shades for medium-warm skin), hair color (a popular highlight shade), and food-referencing color palettes in branding.
Honey: A warm medium brown with golden depth, slightly darker than caramel. Approximate hex: #B8860B to #D4A017 depending on context. CSS darkgoldenrod (#B8860B) sits in this range. Honey in hair color describes a warm medium blonde; in skin tone vocabulary it describes a medium-warm complexion.
Toffee: A warm deep brown with amber warmth and some orange, approximately #A0683A. Darker than caramel but not as dark as chocolate. Toffee is used in hair color naming and cosmetics to describe a medium-warm warm brown.
Mocha: A medium-dark warm brown with coffee warmth, approximately #967969. The name suggests the coffee-chocolate blend that gives mocha its flavor, implying a brown that is neither pure coffee nor chocolate but between the two.
Coffee: A warm medium-dark brown, approximately #6F4E37. Coffee as a color name implies a specific warmth and depth associated with dark roasted coffee beans. It is used in interior design, fashion, and cosmetics consistently.
Walnut: A warm medium-dark brown, approximately #773F1A. Walnut in interior design and furniture vocabulary describes a brown with slight reddish warmth. Lighter than mahogany, darker than coffee.
Dark Brown Color Names: Chocolate, Espresso, and Mahogany
Chocolate: CSS chocolate (#D2691E) is a warm medium brown, lighter than the candy most people associate with the word. In design and cosmetics, chocolate describes a deeper brown, approximately #5C3317 to #7B3F00. The word implies richness and warmth.
Mahogany: A dark reddish-brown named after the mahogany tree wood. CSS maroon (#800000) is close in depth but redder. In skin tone vocabulary and cosmetics, mahogany describes a deep warm skin tone. In interior design, mahogany describes wood colors in the #6D2B1A to #4C1A07 range.
Espresso: A very dark warm brown, near the depth of black coffee. Approximate hex: #2E1503 to #3D1F0A. In hair coloring, espresso describes the very darkest brown before true black. In interior design, espresso is used for cabinetry and furniture in this near-black range.
Dark Walnut: A deep, rich brown used in furniture and interior design. Approximate hex: #4A2810 to #3D2010. Slightly cooler than mahogany with less red.
Ebony: A near-black brown, the color of ebony wood. Approximate hex: #555D50 in some design contexts, #3D2B1F in others. Ebony implies depth with a slight warmth, distinguishing it from pure black.
Reddish-Brown Color Names: Sienna, Rust, and Terracotta
Sienna: CSS sienna (#A0522D) is a warm red-brown, one of the more specific CSS named colors in the earth tone range. Raw sienna is a golden-yellow-brown; burnt sienna is the more orange-red version most people know. CSS sienna sits in the burnt sienna range. Widely used in art supplies and color education.
Rust: A dark orange-red-brown, the color of oxidized iron. Approximate hex: #B7410E. Rust is distinct from terracotta (brighter, more orange) and from sienna (more red, less orange). In fashion, rust describes a warm autumn palette color.
Terracotta: A warm orange-red-brown, the color of unglazed fired clay. Approximate hex: #CC5500. Terracotta is distinctly more orange than sienna or rust and reads as a warm, earthy orange-brown rather than a pure brown. It became a dominant interior design trend color in the early 2020s.
Ochre: A golden-yellow-brown, one of the oldest pigments used by humans. Approximate hex: #CC7722. Ochre sits at the warm-yellow edge of the brown family, leaning into golden territory. It is widely used in art and historical design.
Umber: A dark brown with either yellow warmth (raw umber, approximately #826644) or red-brown warmth (burnt umber, approximately #8B4513). CSS saddlebrown (#8B4513) is close to burnt umber in quality.
Taupe: A gray-brown that sits at the cool edge of the neutral brown family. Approximate hex: #483C32 for dark taupe, #D2B48C for lighter versions. Taupe in interior design describes a versatile neutral that works with both warm and cool palettes.
CSS Brown and Earth-Tone Named Colors
| CSS Name | Hex | Visual Quality |
|---|---|---|
| cornsilk | #FFF8DC | Very pale warm yellow-cream |
| wheat | #F5DEB3 | Light warm tan |
| burlywood | #DEB887 | Pale warm sandy brown |
| tan | #D2B48C | Light warm golden brown |
| peru | #CD853F | Medium warm tan-brown |
| chocolate | #D2691E | Medium warm orange-brown |
| saddlebrown | #8B4513 | Medium-dark warm red-brown |
| sienna | #A0522D | Warm red-brown |
| brown | #A52A2A | Dark red-brown |
| maroon | #800000 | Deep dark red-brown |
Note: CSS "brown" (#A52A2A) is actually a dark red-brown, much more red than what most people mean when they say brown. For a more neutral mid-range brown, peru (#CD853F) or saddlebrown (#8B4513) are closer to everyday usage.
Using Brown Hex Codes in Design
Brown is the most misunderstood neutral in digital design because the word covers such a wide range. When specifying brown for a design system, state the undertone explicitly: warm brown with red undertone, warm brown with yellow undertone, or cool gray-brown (taupe). The difference between #CC5500 (terracotta) and #D2B48C (tan) is enormous even though both are technically "brown."
For extracting the exact brown from a reference image, the image color picker returns the precise hex codes from any uploaded photo. For building a complete tonal palette around any brown anchor, the tints and shades generator produces 11 steps from white to black.
The color name finder identifies the nearest CSS named color for any hex input, which is useful for documentation and for understanding where a specific brown falls in the standard color vocabulary. The skin tone vocabulary overlaps significantly with the earth tone range; the skin color names guide covers the brown and warm-neutral shades used in beauty and portrait contexts.
The full range of palette and conversion tools is in the color tools section.
