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

45 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.

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

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

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

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

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

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

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

This page is a named-brown color card with fixed HEX references, HSL, and WCAG labels. Expand any swatch into a token scale via Shade Color.

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.

Brown Shades Glossary

Each named brown lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Fixed earth-tone references for UI and QA.

Chocolate: #D2691E hsl(25, 75%, 47%) W 3.6:1 Fail B 5.8:1 AA

CSS color: #D2691E; Tailwind bg-[#D2691E]
Tan: #D2B48C hsl(34, 44%, 69%) W 2.0:1 Fail B 10.6:1 AAA

CSS color: #D2B48C; Tailwind bg-[#D2B48C]
Mocha: #967969 hsl(21, 18%, 50%) W 4.0:1 Fail B 5.2:1 AA

CSS color: #967969; Tailwind bg-[#967969]
Sienna: #A0522D hsl(19, 56%, 40%) W 5.6:1 AA B 3.7:1 Fail

CSS color: #A0522D; Tailwind bg-[#A0522D]
Espresso: #4E312D hsl(7, 27%, 24%) W 11.7:1 AAA B 1.8:1 Fail

CSS color: #4E312D; Tailwind bg-[#4E312D]
Coffee: #6F4E37 hsl(25, 34%, 33%) W 7.4:1 AAA B 2.8:1 Fail

CSS color: #6F4E37; Tailwind bg-[#6F4E37]
Camel: #C19A6B hsl(33, 41%, 59%) W 2.6:1 Fail B 8.1:1 AAA

CSS color: #C19A6B; Tailwind bg-[#C19A6B]
Saddle Brown: #8B4513 hsl(25, 76%, 31%) W 7.1:1 AAA B 3.0:1 Fail

CSS color: #8B4513; Tailwind bg-[#8B4513]
Peru: #CD853F hsl(30, 59%, 53%) W 3.0:1 Fail B 7.0:1 AAA

CSS color: #CD853F; Tailwind bg-[#CD853F]
Sandy Brown: #F4A460 hsl(28, 87%, 67%) W 2.0:1 Fail B 10.3:1 AAA

CSS color: #F4A460; Tailwind bg-[#F4A460]
Burlywood: #DEB887 hsl(34, 57%, 70%) W 1.9:1 Fail B 11.3:1 AAA

CSS color: #DEB887; Tailwind bg-[#DEB887]
Wheat: #F5DEB3 hsl(39, 77%, 83%) W 1.3:1 Fail B 16.0:1 AAA

CSS color: #F5DEB3; Tailwind bg-[#F5DEB3]
Navajo White: #FFDEAD hsl(36, 100%, 84%) W 1.3:1 Fail B 16.3:1 AAA

CSS color: #FFDEAD; Tailwind bg-[#FFDEAD]
Bisque: #FFE4C4 hsl(33, 100%, 88%) W 1.2:1 Fail B 17.1:1 AAA

CSS color: #FFE4C4; Tailwind bg-[#FFE4C4]
Blanched Almond: #FFEBCD hsl(36, 100%, 90%) W 1.2:1 Fail B 18.0:1 AAA

CSS color: #FFEBCD; Tailwind bg-[#FFEBCD]
Antique White: #FAEBD7 hsl(34, 78%, 91%) W 1.2:1 Fail B 17.9:1 AAA

CSS color: #FAEBD7; Tailwind bg-[#FAEBD7]
Papaya Whip: #FFEFD5 hsl(37, 100%, 92%) W 1.1:1 Fail B 18.6:1 AAA

CSS color: #FFEFD5; Tailwind bg-[#FFEFD5]
Moccasin: #FFE4B5 hsl(38, 100%, 85%) W 1.2:1 Fail B 17.0:1 AAA

CSS color: #FFE4B5; Tailwind bg-[#FFE4B5]
Peach Puff: #FFDAB9 hsl(28, 100%, 86%) W 1.3:1 Fail B 16.0:1 AAA

CSS color: #FFDAB9; Tailwind bg-[#FFDAB9]
Rosy Brown: #BC8F8F hsl(0, 25%, 65%) W 2.8:1 Fail B 7.5:1 AAA

CSS color: #BC8F8F; Tailwind bg-[#BC8F8F]
Firebrick: #B22222 hsl(0, 68%, 42%) W 6.7:1 AA B 3.1:1 Fail

CSS color: #B22222; Tailwind bg-[#B22222]
Cafe Noir: #4B3621 hsl(30, 39%, 21%) W 11.4:1 AAA B 1.8:1 Fail

CSS color: #4B3621; Tailwind bg-[#4B3621]
Walnut: #773F1A hsl(24, 64%, 28%) W 8.4:1 AAA B 2.5:1 Fail

CSS color: #773F1A; Tailwind bg-[#773F1A]
Chestnut: #954535 hsl(10, 48%, 40%) W 6.6:1 AA B 3.2:1 Fail

CSS color: #954535; Tailwind bg-[#954535]
Mahogany: #C04000 hsl(20, 100%, 38%) W 5.3:1 AA B 4.0:1 Fail

CSS color: #C04000; Tailwind bg-[#C04000]
Russet: #80461B hsl(26, 65%, 30%) W 7.5:1 AAA B 2.8:1 Fail

CSS color: #80461B; Tailwind bg-[#80461B]
Sepia: #704214 hsl(30, 70%, 26%) W 8.5:1 AAA B 2.5:1 Fail

CSS color: #704214; Tailwind bg-[#704214]
Umber: #635147 hsl(21, 16%, 33%) W 7.5:1 AAA B 2.8:1 Fail

CSS color: #635147; Tailwind bg-[#635147]
Raw Umber: #826644 hsl(33, 31%, 39%) W 5.3:1 AA B 3.9:1 Fail

CSS color: #826644; Tailwind bg-[#826644]
Burnt Umber: #8A3324 hsl(9, 59%, 34%) W 8.1:1 AAA B 2.6:1 Fail

CSS color: #8A3324; Tailwind bg-[#8A3324]
Burnt Sienna: #E97451 hsl(14, 78%, 62%) W 3.0:1 Fail B 7.1:1 AAA

CSS color: #E97451; Tailwind bg-[#E97451]
Raw Sienna: #D68A59 hsl(24, 60%, 59%) W 2.7:1 Fail B 7.6:1 AAA

CSS color: #D68A59; Tailwind bg-[#D68A59]
Ochre: #CC7722 hsl(30, 71%, 47%) W 3.4:1 Fail B 6.2:1 AA

CSS color: #CC7722; Tailwind bg-[#CC7722]
Bronze: #CD7F32 hsl(30, 61%, 50%) W 3.1:1 Fail B 6.7:1 AA

CSS color: #CD7F32; Tailwind bg-[#CD7F32]
Copper: #B87333 hsl(29, 57%, 46%) W 3.8:1 Fail B 5.5:1 AA

CSS color: #B87333; Tailwind bg-[#B87333]
Fawn: #E5AA70 hsl(30, 69%, 67%) W 2.0:1 Fail B 10.3:1 AAA

CSS color: #E5AA70; Tailwind bg-[#E5AA70]
Khaki: #C3B091 hsl(37, 29%, 67%) W 2.1:1 Fail B 9.9:1 AAA

CSS color: #C3B091; Tailwind bg-[#C3B091]
Desert Sand: #EDC9AF hsl(25, 63%, 81%) W 1.5:1 Fail B 13.6:1 AAA

CSS color: #EDC9AF; Tailwind bg-[#EDC9AF]
Sand: #C2B280 hsl(45, 35%, 63%) W 2.1:1 Fail B 10.0:1 AAA

CSS color: #C2B280; Tailwind bg-[#C2B280]
Taupe: #483C32 hsl(27, 18%, 24%) W 10.7:1 AAA B 2.0:1 Fail

CSS color: #483C32; Tailwind bg-[#483C32]
Earth Yellow: #E1A95F hsl(34, 68%, 63%) W 2.1:1 Fail B 10.0:1 AAA

CSS color: #E1A95F; Tailwind bg-[#E1A95F]
Gold Brown: #996515 hsl(36, 76%, 34%) W 5.0:1 AA B 4.2:1 Fail

CSS color: #996515; Tailwind bg-[#996515]
Light Brown: #B5651D hsl(28, 72%, 41%) W 4.3:1 Fail B 4.8:1 AA

CSS color: #B5651D; Tailwind bg-[#B5651D]
Medium Brown: #7B3F00 hsl(31, 100%, 24%) W 8.2:1 AAA B 2.6:1 Fail

CSS color: #7B3F00; Tailwind bg-[#7B3F00]
Dark Brown: #654321 hsl(30, 51%, 26%) W 8.8:1 AAA B 2.4:1 Fail

CSS color: #654321; Tailwind bg-[#654321]

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.