Maroon Background
#800000 · rgb(128, 0, 0)
About the maroon background
Maroon (#800000) is red at half brightness — rgb(128, 0, 0) — which transforms it from alarm to heritage. It's the red of leather-bound books, velvet curtains and Ivy League crests: serious, warm and timeless.
Because of its depth, maroon supports white text at about 10.9:1 contrast (comfortably WCAG AAA) and works as a rich alternative to navy or charcoal when you want warmth in a dark palette.
What to use a maroon background for
- Academic, legal and heritage branding
- Warm dark backgrounds with cream or gold text
- Fall and winter seasonal campaigns
- Restaurant and wine label design
How to use maroon in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page maroon background */
body {
margin: 0;
background-color: #800000;
}
/* A single section or element */
.hero {
background-color: rgb(128, 0, 0);
} Maroon shades and tints
Click any swatch to copy it. Tints mix maroon with white; shades mix it with black.
Maroon background FAQ
What is the hex code for maroon?
CSS maroon is #800000 — rgb(128, 0, 0), red at exactly 50% brightness. It's a named keyword, so `background: maroon` gives the identical color.
What text color works best on maroon?
White text on #800000 measures about 10.9:1 — well past WCAG AAA. Cream, gold and pale pink also pair beautifully for a warmer feel.
What is the hex code for maroon?
Maroon is #800000 in hexadecimal, rgb(128, 0, 0) in RGB and hsl(0, 100%, 25%) in HSL. Paste #800000 into any CSS background-color property to use it.
How do I set a maroon background in CSS?
Add background-color: #800000; to any element, or apply it to the whole page: body { background-color: #800000; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(128, 0, 0) — with identical results.