Burgundy Background
#800020 · rgb(128, 0, 32)
About the burgundy background
Burgundy (#800020) takes maroon and adds a whisper of blue — rgb(128, 0, 32) — shifting it from brownish to wine-dark. It reads as luxurious, grown-up and quietly expensive.
It's a staple of premium packaging and hospitality branding, and as a dark background it pairs exceptionally well with gold, cream and blush accents.
What to use a burgundy background for
- Wine, spirits and premium food packaging
- Luxury fashion and beauty branding
- Elegant dark hero sections with gold accents
- Warm, intimate restaurant and hotel design
How to use burgundy in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page burgundy background */
body {
margin: 0;
background-color: #800020;
}
/* A single section or element */
.hero {
background-color: rgb(128, 0, 32);
} Burgundy shades and tints
Click any swatch to copy it. Tints mix burgundy with white; shades mix it with black.
Burgundy background FAQ
What's the difference between burgundy and maroon?
Both are dark reds at 50% brightness. Maroon #800000 leans brown because its blue channel is zero; burgundy #800020 carries rgb blue at 32, giving it a cooler, wine-like depth.
Is burgundy accessible with white text?
Yes — white on #800020 measures about 10.8:1, far above the WCAG AA threshold of 4.5:1 for normal text.
What is the hex code for burgundy?
Burgundy is #800020 in hexadecimal, rgb(128, 0, 32) in RGB and hsl(345, 100%, 25%) in HSL. Paste #800020 into any CSS background-color property to use it.
How do I set a burgundy background in CSS?
Add background-color: #800020; to any element, or apply it to the whole page: body { background-color: #800020; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(128, 0, 32) — with identical results.