Maroon Color

About maroon

#800000 is the CSS named color maroon, one of the original 16 HTML colors: the red channel at 128 and nothing else. The name comes from the French marron, meaning chestnut.

Maroon is often confused with burgundy. Burgundy (commonly #800020) adds a little blue for a wine-like tone, while maroon is a pure, brownish dark red. darkred (#8B0000) is almost the same as maroon, just slightly brighter.

#800000 is the value of the CSS named color maroon, defined in the CSS Color specification and identical in every browser.

Other colors called maroon

• Dark red (CSS) #8B0000Nearly identical, marginally brighter.Copy
• Burgundy #800020A bluer, wine-like dark red.Copy

Maroon shades and tints

Shades mix maroon with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with maroon

Color harmonies based on the hue of #800000: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Maroon contrast and readability

On a maroon background, white text reads best (10.94:1). Here is how maroon works as a text color:

Maroon has strong contrast with white and cream, so it works for headings, text and school or sports branding. Pair it with gold or cream for a classic look.

Using maroon in CSS and HTML

:root {
  --color-maroon: #800000;
}

.highlight {
  background-color: var(--color-maroon);
}

.banner {
  background-color: maroon;
  color: #ffffff;
}

.label {
  color: #800000;
  border: 2px solid rgb(128, 0, 0);
}

<p style="background-color: #800000; color: #FFFFFF;">
  Maroon background
</p>