Brown Colors
Every shade of brown in one reference — from soft beige and tan to coffee, chocolate and deep walnut. Each color shows HEX, RGB and HSL values you can copy in one click.
Brown color reference
A systematic brown scale with hex, RGB and HSL values.
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Brown 100 | #FEF3C7 | 254, 243, 199 | 46°, 96%, 89% | |
| Brown 200 | #E7D3BD | 231, 211, 189 | 32°, 48%, 82% | |
| Brown 300 | #C8A27B | 200, 162, 123 | 30°, 40%, 63% | |
| Brown 400 | #B0824C | 176, 130, 76 | 32°, 40%, 49% | |
| Brown 500 | #92400E | 146, 64, 14 | 23°, 83%, 31% | |
| Brown 600 | #78350F | 120, 53, 15 | 22°, 78%, 26% | |
| Brown 700 | #5F2A0B | 95, 42, 11 | 22°, 79%, 21% | |
| Brown 800 | #3F1F0E | 63, 31, 14 | 21°, 64%, 15% | |
| Brown 900 | #2C1508 | 44, 21, 8 | 22°, 69%, 10% | |
| Brown 950 | #1C0C04 | 28, 12, 4 | 20°, 75%, 6% |
Named browns
Common named browns from CSS and design practice.
Complementary and harmonious colors
Brown is a dark shade of orange, sitting around 25°–35° on the wheel. Here are the relationships that pair well with brown.
| Relationship | Angle | Example hue |
|---|---|---|
| Complementary | 180° | Blue / Teal |
| Split-complementary | 150° / 210° | Blue-green / Blue-violet |
| Triadic | 120° / 240° | Green / Purple |
| Analogous | −30° / +30° | Red / Yellow |
Brown in design and accessibility
Brown is a warm neutral that reads as grounded, natural and reliable. It is the anchor hue for coffee, chocolate, wood, leather, paper and earth — which makes it a favourite for brands in hospitality, craft, publishing and organic products. In UI design it works beautifully as a neutral alongside warmer accents, and it is one of the best chromatic options for text because medium and dark browns have strong contrast on light backgrounds.
Common uses in interfaces
- Warm neutrals — replaces gray in coffee, bakery or bookstore designs.
- Editorial and print — cream and brown feel luxurious and paper-like.
- Organic and ethical brands — communicates natural, sustainable, handmade.
- Accessible text — #78350F on white passes AAA easily.
Accessibility notes
Brown is unusually good for text. On white: #78350F reaches about 9.4:1 (AAA), #92400E reaches about 7.3:1 (AAA), and even #A16207 reaches about 5.6:1 (AA). Light browns, tans and beiges fail contrast and should only be used as surfaces or secondary text. On dark backgrounds, use lighter browns and creams for readable text.
Frequently asked questions
What is a classic brown hex code?
CSS brown is #A52A2A. Chocolate is #D2691E, saddle brown is #8B4513, sienna is #A0522D, and tan is #D2B48C. Modern design systems often use deeper, warmer browns like #78350F or #92400E.
What colors go well with brown?
Creams, beiges and tans are the classic neutrals. Complementary colors are cool blues and teals, which create strong visual contrast — leather brown with slate blue, or coffee with teal, feels both modern and grounded. Brown with forest green and ivory is a nature-driven palette; brown with soft pink and cream feels modern and editorial.
Is brown a color or a shade?
Technically brown is a dark, desaturated orange or yellow-orange — it is not a distinct hue on the RGB color wheel but a shade of an existing one. In practice, brown is treated as its own color family because it has distinct associations and uses.
Is brown accessible for text?
Brown is one of the most reliable chromatic colors for text. On white, #78350F reaches about 9.4:1 (AAA), #92400E reaches about 7.3:1 (AAA), and #A16207 reaches about 5.6:1 (AA). Very light browns and tans fail contrast on white and should be used only as surfaces.
How do I generate a full brown scale?
Use our shades generator. Enter any brown as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.