Brown Background
#A52A2A · rgb(165, 42, 42)
About the brown background
Brown (#A52A2A) is what orange looks like at lower brightness — rgb(165, 42, 42) — the color of soil, wood, leather and coffee. It's the most grounded color in the palette: honest, warm, dependable.
As a background it brings organic warmth that neutrals can't, especially for food, craft and outdoor brands. Cream text on brown measures about 7:1, keeping it accessible with a warm tone.
What to use a brown background for
- Coffee, chocolate and craft food branding
- Leather goods and artisan products
- Autumn and rustic seasonal design
- Warm, grounded dark sections
How to use brown in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page brown background */
body {
margin: 0;
background-color: #A52A2A;
}
/* A single section or element */
.hero {
background-color: rgb(165, 42, 42);
} Brown shades and tints
Click any swatch to copy it. Tints mix brown with white; shades mix it with black.
Brown background FAQ
What is the hex code for brown?
CSS `brown` is #A52A2A — rgb(165, 42, 42), sometimes called 'sienna'. Browns are simply dark oranges: drop the brightness of #FFA500 and you land here.
What text color works on brown?
White on #A52A2A measures about 7:1 (AAA pass), and cream or wheat tones read warmer at similar ratios. Avoid dark text — it fails contrast badly on this background.
What is the hex code for brown?
Brown is #A52A2A in hexadecimal, rgb(165, 42, 42) in RGB and hsl(0, 59%, 41%) in HSL. Paste #A52A2A into any CSS background-color property to use it.
How do I set a brown background in CSS?
Add background-color: #A52A2A; to any element, or apply it to the whole page: body { background-color: #A52A2A; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(165, 42, 42) — with identical results.