The brown color code most color references use is #964B00, which is RGB 150, 75, 0. It’s a warm, medium brown, the shade most people picture when they hear the word. Type brown into CSS, though, and you get #A52A2A (RGB 165, 42, 42), a redder brown that looks closer to brick or rust.
Below you’ll find the HEX, RGB, CMYK and HSL values for both, 30 named shades of brown with their codes, six brown color palettes and quick steps for using brown in Canva, Photoshop and CSS.
Shades marked CSS are official CSS color keywords. The other names use the hex values listed in common color references such as Wikipedia’s color lists. CMYK figures are simple conversions from RGB, so check them against a printed proof before a big print run.
Brown Color Code Values at a Glance
Use #964B00 when you want a true, neutral brown. Use CSS brown when a warmer, reddish tone suits the design, or when you’d rather write a color name than a code.
| Format | Brown | Brown (CSS) |
|---|---|---|
| HEX | #964B00 | #A52A2A |
| RGB | 150, 75, 0 | 165, 42, 42 |
| CMYK | 0, 50, 100, 41 | 0, 75, 75, 35 |
| HSL | 30°, 100%, 29% | 0°, 59%, 41% |
| HSV | 30°, 100%, 59% | 0°, 75%, 65% |
| CSS | #964B00 | brown or #A52A2A |
Which Brown Should You Use?
Brown covers a huge range, from almost-black espresso tones to sandy tans. Pick the shade by the job it has to do:
- #964B00 (brown) is a solid all-rounder for illustrations, icons, packaging and earthy branding.
- #654321 (dark brown) and #3D2B1F (bistre) work for text, headings and dark backgrounds. They feel softer than black.
- #6F4E37 (coffee) and #A67B5B (café au lait) are the go-to browns for cafés, bakeries and cozy lifestyle brands.
- #D2B48C (tan), #C19A6B (camel) and #EDC9AF (desert sand) make warm, light backgrounds that pair well with white.
- #B87333 (copper) and #CD7F32 (bronze) add a metallic warmth, a bit like gold does.
On screen, brown is really a dark, muted orange. That’s why browns with more red in them, such as mahogany and chestnut, feel warmer, while greyish browns like beaver and liver feel calm and quiet.
Shades of Brown With Hex Codes
These 30 shades of brown run from deep chocolate and coffee tones to light tans and sandy browns. Copy any hex code and paste it straight into your design tool.
| Shade | HEX | RGB | CMYK |
|---|---|---|---|
| Brown | #964B00 | 150, 75, 0 | 0, 50, 100, 41 |
| Brown (CSS) | #A52A2A | 165, 42, 42 | 0, 75, 75, 35 |
| Dark brown | #654321 | 101, 67, 33 | 0, 34, 67, 60 |
| Saddle brown | #8B4513 | 139, 69, 19 | 0, 50, 86, 45 |
| Sienna | #A0522D | 160, 82, 45 | 0, 49, 72, 37 |
| Chocolate (CSS) | #D2691E | 210, 105, 30 | 0, 50, 86, 18 |
| Chocolate | #7B3F00 | 123, 63, 0 | 0, 49, 100, 52 |
| Coffee | #6F4E37 | 111, 78, 55 | 0, 30, 50, 56 |
| Café au lait | #A67B5B | 166, 123, 91 | 0, 26, 45, 35 |
| Café noir | #4B3621 | 75, 54, 33 | 0, 28, 56, 71 |
| Chestnut | #954535 | 149, 69, 53 | 0, 54, 64, 42 |
| Mahogany | #C04000 | 192, 64, 0 | 0, 67, 100, 25 |
| Burnt umber | #8A3324 | 138, 51, 36 | 0, 63, 74, 46 |
| Kobicha | #6B4423 | 107, 68, 35 | 0, 36, 67, 58 |
| Bistre | #3D2B1F | 61, 43, 31 | 0, 30, 49, 76 |
| Liver | #674C47 | 103, 76, 71 | 0, 26, 31, 60 |
| Milk chocolate | #84563C | 132, 86, 60 | 0, 35, 55, 48 |
| Brown sugar | #AF6E4D | 175, 110, 77 | 0, 37, 56, 31 |
| Camel | #C19A6B | 193, 154, 107 | 0, 20, 45, 24 |
| Coyote brown | #81613C | 129, 97, 60 | 0, 25, 53, 49 |
| Field drab | #6C541E | 108, 84, 30 | 0, 22, 72, 58 |
| Beaver | #9F8170 | 159, 129, 112 | 0, 19, 30, 38 |
| Copper | #B87333 | 184, 115, 51 | 0, 38, 72, 28 |
| Bronze | #CD7F32 | 205, 127, 50 | 0, 38, 76, 20 |
| Peru | #CD853F | 205, 133, 63 | 0, 35, 69, 20 |
| Sandy brown | #F4A460 | 244, 164, 96 | 0, 33, 61, 4 |
| Burlywood | #DEB887 | 222, 184, 135 | 0, 17, 39, 13 |
| Tan | #D2B48C | 210, 180, 140 | 0, 14, 33, 18 |
| Desert sand | #EDC9AF | 237, 201, 175 | 0, 15, 26, 7 |
| Fawn | #E5AA70 | 229, 170, 112 | 0, 26, 51, 10 |
Eight of these are official CSS color names, so you can type the name instead of the code: brown, saddlebrown, sienna, chocolate, peru, sandybrown, burlywood and tan. Watch out for chocolate. In CSS it’s an orange-brown (#D2691E), much lighter than the traditional chocolate color #7B3F00.
Dark Brown Color Codes
For deep browns that can stand in for black, try dark brown #654321, café noir #4B3621, bistre #3D2B1F or chocolate #7B3F00. They’re great for text on cream or tan, and they look less harsh than pure black.
Light Brown Color Codes
For light browns, use tan #D2B48C, burlywood #DEB887, desert sand #EDC9AF or fawn #E5AA70. These sit close to beige, so they make soft page backgrounds and photo frames. At the palest end of the scale, beige #F5F5DC works with both brown and gold, as our gold color code guide shows.
Brown Color Palettes (With Hex Codes)
Brown makes a great base color. It works with creams, greens and blues, and it makes brighter accents feel grounded. Here are six brown color palettes ready to copy:
| Palette | Hex codes | Good for |
|---|---|---|
| Coffee house | #3D2B1F, #6F4E37, #A67B5B, #EDC9AF, #FAF6F0 | Cafés, bakeries and menus |
| Earthy neutrals | #654321, #8B4513, #C19A6B, #D2B48C, #F5F5DC | Interiors, outdoor brands and packaging |
| Brown and sage | #6B4423, #A67B5B, #9CAF88, #DDE5D3, #F7F5F0 | Wellness, organic food and gardening |
| Brown and navy | #4B3621, #964B00, #1B2A49, #8DA9C4, #F4F1EA | Menswear, finance and editorial sites |
| Autumn rust | #8A3324, #C04000, #CD7F32, #E5AA70, #FBEFE1 | Fall campaigns, candles and Thanksgiving designs |
| Brown and blush | #654321, #AF6E4D, #E8B4B8, #F6DCDC, #FFF7F5 | Beauty, fashion and wedding stationery |
For more ideas, browse our luxury color palettes, where browns and golds show up often, or the lighter pastel color codes.
What Colors Go With Brown?
- Cream, beige and white: the safest choice. They keep brown designs light and warm.
- Sage and olive green: an earthy, natural pairing for wellness, food and outdoor brands.
- Navy and dusty blue: blue sits opposite orange on the color wheel, so it balances brown’s warmth.
- Blush and soft pink: a modern, gentle look for beauty and fashion.
- Gold, copper and mustard: rich, autumnal and a little luxurious. Our yellow color code guide lists mustard and other warm yellows.
- Turquoise: a classic contrast for southwestern and boho styles. See our turquoise guide for codes.
How to Use the Brown Color Code in Canva, Photoshop and CSS
- Canva: select your text or shape, click the color tile on the toolbar, choose the plus icon to add a new color and paste #964B00 into the hex field.
- Photoshop: click the foreground color swatch, type 964B00 into the # field of the Color Picker and select OK.
- CSS: write
color: #964B00;or use a named color such ascolor: saddlebrown;. - Brand kits: save each brown with its RGB and CMYK values so your website, social posts and print all match. Our brand kit examples show how other brands lay this out.
Make Sure Brown Text Is Readable
Dark browns are some of the most readable text colors around. Light browns are not. Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text. Here’s how some common brown pairings score:
| Text color | Background | Contrast ratio | Normal text |
|---|---|---|---|
| #964B00 brown | #FFFFFF white | 6.4:1 | Passes |
| #A52A2A CSS brown | #FFFFFF white | 7.1:1 | Passes |
| #D2B48C tan | #FFFFFF white | 2:1 | Fails |
| #FFFFFF white | #6F4E37 coffee | 7.4:1 | Passes |
| #3D2B1F bistre | #EDC9AF desert sand | 8.7:1 | Passes |
In short, medium and dark browns are safe on white. Light tans need dark text on top of them, not the other way round.
What Does the Color Brown Mean?
Brown is the color of earth, wood, leather and coffee, so people tend to read it as natural, warm and dependable. It feels honest and down to earth rather than flashy. That’s why you see it so often in food, coffee, outdoor and handmade brands, and in interiors that aim for a cozy feel. The flip side is that a lot of dark brown can look heavy or dated. Balance it with cream or white space, and add one brighter accent.
Building a full palette? Our guides to the purple color code and gold color code have more hex codes, and both work as accents next to brown.
Frequently Asked Questions
The most common hex code for brown is #964B00 (RGB 150, 75, 0). The CSS color named brown is #A52A2A (RGB 165, 42, 42), which is noticeably redder.
Brown #964B00 is RGB 150, 75, 0. CSS brown #A52A2A is RGB 165, 42, 42.
A standard conversion gives CMYK 0, 50, 100, 41 for #964B00. Printed browns can shift between printers and papers, so check a proof before a large run.
Dark brown is #654321 (RGB 101, 67, 33). For an even deeper tone, try café noir #4B3621 or bistre #3D2B1F.
Popular light browns include tan #D2B48C, burlywood #DEB887 and desert sand #EDC9AF. All three work well as backgrounds with dark brown text.
In paint, mix the three primary colors (red, yellow and blue), or mix orange with a little blue. On screen, brown is a dark orange, so it has lots of red, some green and almost no blue, as in RGB 150, 75, 0.
