Shades of Brown

Shades of brown include tan, chocolate, sienna, peru, saddle brown, and mocha. The base brown color's hex value in HTML is #A52A2A. Browse earth tones below, copy HEX codes, or build a palette in Shade Color.

All Shades of Brown

55 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named brown colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Brown

#A52A2A Palette

W 7.1:1 AAA B 3.0:1 Fail

Saddle Brown

#8B4513 Palette

W 7.1:1 AAA B 3.0:1 Fail

Sienna

#A0522D Palette

W 5.6:1 AA B 3.7:1 Fail

Chocolate

#D2691E Palette

W 3.6:1 Fail B 5.8:1 AA

Peru

#CD853F Palette

W 3.0:1 Fail B 7.0:1 AAA

Sandy Brown

#F4A460 Palette

W 2.0:1 Fail B 10.3:1 AAA

Burlywood

#DEB887 Palette

W 1.9:1 Fail B 11.3:1 AAA

Tan

#D2B48C Palette

W 2.0:1 Fail B 10.6:1 AAA

Wheat

#F5DEB3 Palette

W 1.3:1 Fail B 16.0:1 AAA

Navajo White

#FFDEAD Palette

W 1.3:1 Fail B 16.3:1 AAA

Bisque

#FFE4C4 Palette

W 1.2:1 Fail B 17.1:1 AAA

Blanched Almond

#FFEBCD Palette

W 1.2:1 Fail B 18.0:1 AAA

Antique White

#FAEBD7 Palette

W 1.2:1 Fail B 17.9:1 AAA

Papaya Whip

#FFEFD5 Palette

W 1.1:1 Fail B 18.6:1 AAA

Moccasin

#FFE4B5 Palette

W 1.2:1 Fail B 17.0:1 AAA

Peach Puff

#FFDAB9 Palette

W 1.3:1 Fail B 16.0:1 AAA

Rosy Brown

#BC8F8F Palette

W 2.8:1 Fail B 7.5:1 AAA

Maroon

#800000 Palette

W 10.9:1 AAA B 1.9:1 Fail

Dark Red

#8B0000 Palette

W 10.0:1 AAA B 2.1:1 Fail

Firebrick

#B22222 Palette

W 6.7:1 AA B 3.1:1 Fail

Coffee

#6F4E37 Palette

W 7.4:1 AAA B 2.8:1 Fail

Cafe Noir

#4B3621 Palette

W 11.4:1 AAA B 1.8:1 Fail

Espresso

#4E312D Palette

W 11.7:1 AAA B 1.8:1 Fail

Mocha

#967969 Palette

W 4.0:1 Fail B 5.2:1 AA

Cocoa Brown

#D2691E Palette

W 3.6:1 Fail B 5.8:1 AA

Walnut

#773F1A Palette

W 8.4:1 AAA B 2.5:1 Fail

Chestnut

#954535 Palette

W 6.6:1 AA B 3.2:1 Fail

Mahogany

#C04000 Palette

W 5.3:1 AA B 4.0:1 Fail

Auburn

#A52A2A Palette

W 7.1:1 AAA B 3.0:1 Fail

Russet

#80461B Palette

W 7.5:1 AAA B 2.8:1 Fail

Sepia

#704214 Palette

W 8.5:1 AAA B 2.5:1 Fail

Umber

#635147 Palette

W 7.5:1 AAA B 2.8:1 Fail

Raw Umber

#826644 Palette

W 5.3:1 AA B 3.9:1 Fail

Burnt Umber

#8A3324 Palette

W 8.1:1 AAA B 2.6:1 Fail

Burnt Sienna

#E97451 Palette

W 3.0:1 Fail B 7.1:1 AAA

Raw Sienna

#D68A59 Palette

W 2.7:1 Fail B 7.6:1 AAA

Ochre

#CC7722 Palette

W 3.4:1 Fail B 6.2:1 AA

Bronze

#CD7F32 Palette

W 3.1:1 Fail B 6.7:1 AA

Copper

#B87333 Palette

W 3.8:1 Fail B 5.5:1 AA

Camel

#C19A6B Palette

W 2.6:1 Fail B 8.1:1 AAA

Fawn

#E5AA70 Palette

W 2.0:1 Fail B 10.3:1 AAA

Khaki

#C3B091 Palette

W 2.1:1 Fail B 9.9:1 AAA

Dark Khaki

#BDB76B Palette

W 2.1:1 Fail B 10.1:1 AAA

Desert Sand

#EDC9AF Palette

W 1.5:1 Fail B 13.6:1 AAA

Sand

#C2B280 Palette

W 2.1:1 Fail B 10.0:1 AAA

Beige

#F5F5DC Palette

W 1.1:1 Fail B 19.0:1 AAA

Ecru

#C2B280 Palette

W 2.1:1 Fail B 10.0:1 AAA

Taupe

#483C32 Palette

W 10.7:1 AAA B 2.0:1 Fail

Dark Taupe

#483C32 Palette

W 10.7:1 AAA B 2.0:1 Fail

Earth Yellow

#E1A95F Palette

W 2.1:1 Fail B 10.0:1 AAA

Gold Brown

#996515 Palette

W 5.0:1 AA B 4.2:1 Fail

Golden Brown

#996515 Palette

W 5.0:1 AA B 4.2:1 Fail

Light Brown

#B5651D Palette

W 4.3:1 Fail B 4.8:1 AA

Medium Brown

#7B3F00 Palette

W 8.2:1 AAA B 2.6:1 Fail

Dark Brown

#654321 Palette

W 8.8:1 AAA B 2.4:1 Fail

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Purple

Shades of Pink

Shades of Gray

Shades of Yellow

Shades of Red

Shades of Black

About Shades of Brown

Brown brings warmth for food, outdoor, craft, and heritage brands. Light tans suit backgrounds; deep espresso works for text and headers.

Want a full Brown theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Brown-50 … 950.
Copy the HEX values into CSS variables for production.

Popular Brown Shades Glossary

Brown notes below highlight warmth and material feel, from pale sand to espresso-dark anchors.

What is Chocolate?

Chocolate (#D2691E) is a warm orange-brown. Appetizing for food brands and cozy ecommerce palettes.

What is Tan?

Tan (#D2B48C) is a light sandy brown. Soft background tone for paper-like layouts and desert themes.

What is Mocha?

Mocha (#967969) is a muted coffee brown. Warm neutral for cafe brands and soft UI chrome.

What is Sienna?

Sienna (#A0522D) is an earth pigment brown. Natural for craft, pottery, and outdoor storytelling sites.

What is Beige?

Beige (#F5F5DC) is a pale warm neutral. Large-area background color for calm, editorial layouts.

What is Espresso?

Espresso (#4E312D) is a deep roasted brown. Anchors text and headers in food and hospitality design.

What is Coffee?

Reach for Coffee (#6F4E37) when you need a deep brown that feels balanced. It pairs well with neutrals and holds up in wood and leather product UI.

What is Camel?

Camel (#C19A6B) reads as a balanced light brown in digital palettes. On screens it stays readable for earthy packaging systems when contrast is checked.

More Brown color definitions

Brown (#A52A2A): Brown (#A52A2A) is a deep brown with a dramatic character. It pairs well with neutrals and holds up in outdoor storytelling.
Saddle Brown (#8B4513): Saddle Brown (#8B4513) brings a vivid, deep note to the brown family. Its RGB mix (139, 69, 19) skews toward vivid brown work—especially craft and heritage sites.
Peru (#CD853F): Designers pick Peru (#CD853F) as a light brown accent with a balanced vibe. It pairs well with neutrals and holds up in food and cafe branding.
Sandy Brown (#F4A460): Sandy Brown (#F4A460) lands as a light brown—balanced enough for earthy packaging systems. Its RGB mix (244, 164, 96) skews toward balanced brown work—especially earthy packaging systems.
Burlywood (#DEB887): Burlywood (#DEB887) is a light brown with a balanced character. Around HSL(33, 56%, 70%), it stays useful for food and cafe branding.
Wheat (#F5DEB3): Reach for Wheat (#F5DEB3) when you need a pale brown that feels balanced. It pairs well with neutrals and holds up in wood and leather product UI.
Navajo White (#FFDEAD): Navajo White (#FFDEAD) reads as a balanced pale brown in digital palettes. Its RGB mix (255, 222, 173) skews toward balanced brown work—especially warm editorial layouts.
Bisque (#FFE4C4): Designers pick Bisque (#FFE4C4) as a pale brown accent with a balanced vibe. Around HSL(32, 100%, 88%), it stays useful for wood and leather product UI.
Blanched Almond (#FFEBCD): Blanched Almond (#FFEBCD) lands as a pale brown—balanced enough for earthy packaging systems. On screens it stays readable for craft and heritage sites when contrast is checked.
Antique White (#FAEBD7): Antique White (#FAEBD7) is a pale brown with a muted character. It pairs well with neutrals and holds up in outdoor storytelling.
Papaya Whip (#FFEFD5): Papaya Whip (#FFEFD5) brings a balanced, pale note to the brown family. Its RGB mix (255, 239, 213) skews toward balanced brown work—especially craft and heritage sites.
Moccasin (#FFE4B5): Reach for Moccasin (#FFE4B5) when you need a pale brown that feels balanced. Around HSL(38, 100%, 85%), it stays useful for outdoor storytelling.
Peach Puff (#FFDAB9): Peach Puff (#FFDAB9) reads as a balanced pale brown in digital palettes. On screens it stays readable for earthy packaging systems when contrast is checked.
Rosy Brown (#BC8F8F): Designers pick Rosy Brown (#BC8F8F) as a light brown accent with a balanced vibe. It pairs well with neutrals and holds up in food and cafe branding.
Maroon (#800000): Maroon (#800000) is a dark brownish red. Grounding color for traditional brands and dark red themes.
Dark Red (#8B0000): Dark Red (#8B0000) is a very dark brown with a dramatic character. Around HSL(0, 100%, 27%), it stays useful for food and cafe branding.
Firebrick (#B22222): Firebrick (#B22222) brings a dramatic, deep note to the brown family. On screens it stays readable for warm editorial layouts when contrast is checked.
Cafe Noir (#4B3621): Cafe Noir (#4B3621) reads as a dramatic deep brown in digital palettes. Its RGB mix (75, 54, 33) skews toward dramatic brown work—especially warm editorial layouts.
Cocoa Brown (#D2691E): Cocoa Brown (#D2691E) is a mid-tone brown with a vivid character. It pairs well with neutrals and holds up in outdoor storytelling.
Walnut (#773F1A): Walnut (#773F1A) brings a dramatic, deep note to the brown family. Its RGB mix (119, 63, 26) skews toward dramatic brown work—especially craft and heritage sites.
Chestnut (#954535): Reach for Chestnut (#954535) when you need a deep brown that feels balanced. Around HSL(9, 47%, 39%), it stays useful for outdoor storytelling.
Mahogany (#C04000): Mahogany (#C04000) reads as a vivid deep brown in digital palettes. On screens it stays readable for earthy packaging systems when contrast is checked.
Auburn (#A52A2A): Designers pick Auburn (#A52A2A) as a deep brown accent with a dramatic vibe. It pairs well with neutrals and holds up in food and cafe branding.
Russet (#80461B): Russet (#80461B) lands as a deep brown—vivid enough for earthy packaging systems. Its RGB mix (128, 70, 27) skews toward vivid brown work—especially earthy packaging systems.
Sepia (#704214): Sepia (#704214) is a deep brown with a earthy character. Around HSL(30, 69%, 25%), it stays useful for food and cafe branding.
Umber (#635147): Umber (#635147) brings a earthy, deep note to the brown family. On screens it stays readable for warm editorial layouts when contrast is checked.
Raw Umber (#826644): Reach for Raw Umber (#826644) when you need a mid-tone brown that feels earthy. It pairs well with neutrals and holds up in wood and leather product UI.
Burnt Umber (#8A3324): Burnt Umber (#8A3324) reads as a earthy deep brown in digital palettes. Its RGB mix (138, 51, 36) skews toward earthy brown work—especially warm editorial layouts.
Burnt Sienna (#E97451): Designers pick Burnt Sienna (#E97451) as a mid-tone brown accent with a balanced vibe. Around HSL(13, 77%, 61%), it stays useful for wood and leather product UI.
Raw Sienna (#D68A59): Raw Sienna (#D68A59) lands as a light brown—balanced enough for earthy packaging systems. On screens it stays readable for craft and heritage sites when contrast is checked.
Ochre (#CC7722): Ochre (#CC7722) is a mid-tone brown with a vivid character. It pairs well with neutrals and holds up in outdoor storytelling.
Bronze (#CD7F32): Bronze (#CD7F32) brings a vivid, mid-tone note to the brown family. Its RGB mix (205, 127, 50) skews toward vivid brown work—especially craft and heritage sites.
Copper (#B87333): Reach for Copper (#B87333) when you need a mid-tone brown that feels vivid. Around HSL(28, 56%, 46%), it stays useful for outdoor storytelling.
Fawn (#E5AA70): Designers pick Fawn (#E5AA70) as a light brown accent with a balanced vibe. It pairs well with neutrals and holds up in food and cafe branding.
Khaki (#C3B091): Khaki (#C3B091) lands as a light brown—balanced enough for earthy packaging systems. Its RGB mix (195, 176, 145) skews toward balanced brown work—especially earthy packaging systems.
Dark Khaki (#BDB76B): Dark Khaki (#BDB76B) is a light brown with a balanced character. Around HSL(55, 38%, 58%), it stays useful for food and cafe branding.
Desert Sand (#EDC9AF): Desert Sand (#EDC9AF) brings a balanced, pale note to the brown family. On screens it stays readable for warm editorial layouts when contrast is checked.
Sand (#C2B280): Reach for Sand (#C2B280) when you need a light brown that feels balanced. It pairs well with neutrals and holds up in wood and leather product UI.
Ecru (#C2B280): Designers pick Ecru (#C2B280) as a light brown accent with a balanced vibe. Around HSL(45, 35%, 63%), it stays useful for wood and leather product UI.
Taupe (#483C32): Taupe (#483C32) lands as a deep brown—dramatic enough for earthy packaging systems. On screens it stays readable for craft and heritage sites when contrast is checked.
Dark Taupe (#483C32): Dark Taupe (#483C32) is a deep brown with a dramatic character. It pairs well with neutrals and holds up in outdoor storytelling.
Earth Yellow (#E1A95F): Earth Yellow (#E1A95F) brings a earthy, light note to the brown family. Its RGB mix (225, 169, 95) skews toward earthy brown work—especially craft and heritage sites.
Gold Brown (#996515): Reach for Gold Brown (#996515) when you need a mid-tone brown that feels vivid. Around HSL(36, 75%, 34%), it stays useful for outdoor storytelling.
Golden Brown (#996515): Golden Brown (#996515) reads as a vivid mid-tone brown in digital palettes. On screens it stays readable for earthy packaging systems when contrast is checked.
Light Brown (#B5651D): Designers pick Light Brown (#B5651D) as a mid-tone brown accent with a vivid vibe. It pairs well with neutrals and holds up in food and cafe branding.
Medium Brown (#7B3F00): Medium Brown (#7B3F00) lands as a deep brown—dramatic enough for earthy packaging systems. Its RGB mix (123, 63, 0) skews toward dramatic brown work—especially earthy packaging systems.
Dark Brown (#654321): Dark Brown (#654321) is a deep brown with a dramatic character. Around HSL(30, 50%, 26%), it stays useful for food and cafe branding.

FAQ

How to use this page?

Copy any brown HEX or expand it into tints and shades with Shade Color.

What is the most popular shade of brown?

Chocolate brown is a popular warm brown for food and lifestyle brands, reading appetizing without going too dark.

What is the base brown HEX value?

The reference base brown on this page uses #A52A2A. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Brown-50 through Brown-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.