Brown HEX Code
The HEX code for CSS brown is #A52A2A. Brown is a composite color made by combining red, yellow, and black. It evokes natural, earthy qualities and is widely used in designs related to nature, food, leather, and rustic themes.
Brown Color Values
| Format | Value |
|---|
| HEX | #A52A2A |
| RGB | rgb(165, 42, 42) |
| HSL | hsl(0, 59%, 41%) |
| CMYK | C:0 M:75 Y:75 K:35 |
Brown Shades and Variations
| Shade | HEX | Description |
|---|
| Bisque | #FFE4C4 | Light, warm |
| Tan | #D2B48C | Sandy brown |
| Burlywood | #DEB887 | Light wood |
| Peru | #CD853F | Copper brown |
| Chocolate | #D2691E | Rich, warm |
| Sienna | #A0522D | Earth tone |
| Saddle Brown | #8B4513 | Leather |
| Brown | #A52A2A | CSS brown |
| Maroon | #800000 | Dark red-brown |
Brown in Design
Brown conveys:
- Nature: Earth, wood, organic
- Stability: Reliability, groundedness
- Warmth: Comfort, rustic charm
- Authenticity: Handmade, artisan
Using Brown in Web Design
``css
/* Earthy color palette */
:root {
--brown-light: #DEB887;
--brown-medium: #A0522D;
--brown-dark: #5D4037;
--brown-accent: #8D6E63;
}
/* Coffee-themed design */
.coffee-card {
background-color: #F5F0E8;
border: 1px solid #D7CCC8;
color: #4E342E;
}
``
Brown Color Palettes
| Style | Primary | Secondary | Accent |
|---|
| Earth | #5D4037 | #795548 | #A1887F |
| Coffee | #4E342E | #8D6E63 | #D7CCC8 |
| Wood | #8B4513 | #CD853F | #DEB887 |
| Leather | #6D4C41 | #8D6E63 | #BCAAA4 |
Brown in Material Design
| Level | HEX | Name |
|---|
| 50 | #EFEBE9 | Lightest |
| 200 | #BCAAA4 | Light |
| 500 | #795548 | Medium |
| 700 | #5D4037 | Dark |
| 900 | #3E2723 | Darkest |
Industries Using Brown
| Industry | Use Case |
|---|
| Coffee/Chocolate | Product branding |
| Furniture | Wood finishes |
| Fashion | Leather goods |
| Organic food | Natural products |
| Outdoors | Nature brands |
Brown pairs well with cream, beige, orange, and green for cohesive earthy palettes.