Shades of brown
Brown is dark, low-saturation orange or red. Its shades range from fawn and tan through coffee and chestnut to umber and sepia. Below: 24 named shades with hex codes — tap a chip to copy it.
1 light · 10 medium · 13 dark · 13 pass AA as text on white
- Burly Wood#DEB887
- Tan#D2B48C
- Fawn#E5AA70
- Dark Khaki#BDB76B
- Rosy Brown#BC8F8F
- Burnt sienna#E97451
- Peru#CD853F
- Bronze#CD7F32
- Chocolate#D2691E
- Beaver#9F8170
- Café au lait#A67B5B
- Mahogany#C04000
- Raw umber#826644
- Sienna#A0522D
- Chestnut#954535
- Brown#A52A2A
- Saddle Brown#8B4513
- Russet#80461B
- Coffee#6F4E37
- Umber#635147
- Liver#674C47
- Sepia#704214
- Maroon#800000
- Taupe#483C32
Brown color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Burly WoodCSS | #DEB887 | rgb(222, 184, 135) | hsl(34 57% 70%) | (0%, 17%, 39%, 13%) | 1.85:1 | 11.31:1 |
| TanCSS | #D2B48C | rgb(210, 180, 140) | hsl(34 44% 69%) | (0%, 14%, 33%, 18%) | 1.97:1 | 10.64:1 |
| Fawn | #E5AA70 | rgb(229, 170, 112) | hsl(30 69% 67%) | (0%, 26%, 51%, 10%) | 2.03:1 | 10.31:1 |
| Dark KhakiCSS | #BDB76B | rgb(189, 183, 107) | hsl(56 38% 58%) | (0%, 3%, 43%, 26%) | 2.06:1 | 10.14:1 |
| Rosy BrownCSS | #BC8F8F | rgb(188, 143, 143) | hsl(0 25% 65%) | (0%, 24%, 24%, 26%) | 2.81:1 | 7.46:1 |
| Burnt sienna | #E97451 | rgb(233, 116, 81) | hsl(14 78% 62%) | (0%, 50%, 65%, 9%) | 2.96:1 | 7.08:1 |
| PeruCSS | #CD853F | rgb(205, 133, 63) | hsl(30 59% 53%) | (0%, 35%, 69%, 20%) | 2.99:1 | 7.02:1 |
| Bronze | #CD7F32 | rgb(205, 127, 50) | hsl(30 61% 50%) | (0%, 38%, 76%, 20%) | 3.14:1 | 6.67:1 |
| ChocolateCSS | #D2691E | rgb(210, 105, 30) | hsl(25 75% 47%) | (0%, 50%, 86%, 18%) | 3.63:1 | 5.77:1 |
| Beaver | #9F8170 | rgb(159, 129, 112) | hsl(22 20% 53%) | (0%, 19%, 30%, 38%) | 3.59:1 | 5.84:1 |
| Café au lait | #A67B5B | rgb(166, 123, 91) | hsl(26 30% 50%) | (0%, 26%, 45%, 35%) | 3.74:1 | 5.60:1 |
| Mahogany | #C04000 | rgb(192, 64, 0) | hsl(20 100% 38%) | (0%, 67%, 100%, 25%) | 5.28:1 | 3.97:1 |
| Raw umber | #826644 | rgb(130, 102, 68) | hsl(33 31% 39%) | (0%, 22%, 48%, 49%) | 5.33:1 | 3.93:1 |
| SiennaCSS | #A0522D | rgb(160, 82, 45) | hsl(19 56% 40%) | (0%, 49%, 72%, 37%) | 5.61:1 | 3.73:1 |
| Chestnut | #954535 | rgb(149, 69, 53) | hsl(10 48% 40%) | (0%, 54%, 64%, 42%) | 6.60:1 | 3.18:1 |
| BrownCSS | #A52A2A | rgb(165, 42, 42) | hsl(0 59% 41%) | (0%, 75%, 75%, 35%) | 7.08:1 | 2.96:1 |
| Saddle BrownCSS | #8B4513 | rgb(139, 69, 19) | hsl(25 76% 31%) | (0%, 50%, 86%, 45%) | 7.09:1 | 2.95:1 |
| Russet | #80461B | rgb(128, 70, 27) | hsl(26 65% 30%) | (0%, 45%, 79%, 50%) | 7.47:1 | 2.80:1 |
| Coffee | #6F4E37 | rgb(111, 78, 55) | hsl(25 34% 33%) | (0%, 30%, 50%, 56%) | 7.44:1 | 2.82:1 |
| Umber | #635147 | rgb(99, 81, 71) | hsl(21 16% 33%) | (0%, 18%, 28%, 61%) | 7.50:1 | 2.79:1 |
| Liver | #674C47 | rgb(103, 76, 71) | hsl(9 18% 34%) | (0%, 26%, 31%, 60%) | 7.77:1 | 2.70:1 |
| Sepia | #704214 | rgb(112, 66, 20) | hsl(30 70% 26%) | (0%, 41%, 82%, 56%) | 8.47:1 | 2.47:1 |
| MaroonCSS | #800000 | rgb(128, 0, 0) | hsl(0 100% 25%) | (0%, 100%, 100%, 50%) | 10.94:1 | 1.91:1 |
| Taupe | #483C32 | rgb(72, 60, 50) | hsl(27 18% 24%) | (0%, 17%, 31%, 72%) | 10.67:1 | 1.96:1 |
Make your own shades of brown
Pick any brown and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using brown in design
Browns ground warm palettes and suit food, craft and outdoor brands. Dark browns make softer alternatives to black text.
To pair it with other hues, start from the color wheel or see colors that go with brown. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of brown are there?
There is no fixed number: screens can show millions of colors and any brown hue can be made lighter, darker or more muted. This page lists 24 named shades of brown — the CSS named colors that fall in the brown family plus widely used names such as coffee, umber, burnt sienna.
What is the hex code for brown?
There is no single official brown. The CSS keyword "brown" is #A52A2A; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of brown?
In this list the lightest is Burly Wood (#DEB887) and the darkest is Taupe (#483C32), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of brown are readable as text on white?
13 of the 24 shades reach the WCAG AA ratio of 4.5:1 on white, for example Sepia (#704214), Maroon (#800000), Taupe (#483C32). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with brown?
See the palettes on our "colors that go with brown" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of brown?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of brown" means every variation of the hue, which is how this page uses it.