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.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.