Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Maroon color: hex code #800000, RGB and shades

Maroon is #800000 (RGB 128, 0, 0), a CSS named color: a dark red with no green or blue. White text reaches 10.94:1 on it, and it reads as text on white at the same 10.94:1.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchMaroondark, saturated red
HEX
#800000
RGB
rgb(128, 0, 0)
HSL
hsl(0, 100%, 25%)

Best text on it: white at 10.94:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Maroon

  • HEX#800000
  • RGBrgb(128, 0, 0)
  • HSLhsl(0, 100%, 25%)
  • HSV0°, 100%, 50%
  • CMYK0%, 100%, 100%, 50%
  • Lablab(26.2% 48.5 39.4)
  • OKLCHoklch(37.7% 0.155 29.2)
  • Decimal8388608

Tints, shades and tones

From white to black in 10% steps, with Maroon in the middle. Tap a code to copy it.

  1. 90%#F2E6E6
  2. 80%#E6CCCC
  3. 70%#D9B3B3
  4. 60%#CC9999
  5. 50%#C08080
  6. 40%#B36666
  7. 30%#A64D4D
  8. 20%#993333
  9. 10%#8D1A1A
  10. Base#800000
  11. 10%#730000
  12. 20%#660000
  13. 30%#5A0000
  14. 40%#4D0000
  15. 50%#400000
  16. 60%#330000
  17. 70%#260000
  18. 80%#1A0000
  19. 90%#0D0000

Tones (mixed with gray)

  1. 10%#800D0D
  2. 20%#801A1A
  3. 30%#802626
  4. 40%#803333
  5. 50%#804040
  6. 60%#804D4D
  7. 70%#805A5A
  8. 80%#806666
  9. 90%#807373

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #140000
  • #340000
  • #800000
  • #CC0000
  • #FF1A1A

Maroon in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Maroon with its complement, its triad and its tint and shade
  • Maroon
  • Triad #008000
  • Triad #000080
  • Complement
  • 50% tint
  • 50% shade

Maroon in use

New collectionAutumn edit

Card body text stays dark for reading; maroon carries the header and the button.

Shop nowTag

Headline in Maroon

A paragraph with a link set in this color, which is dark enough for text on white.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#800000
  • Protanopia (no red cones)#332C00
  • Deuteranopia (no green cones)#504600
  • Tritanopia (no blue cones)#8E0003

Contrast and readability

PairingRatioWCAG 2.2
as text on white10.94:1AA AA large AAA
as text on black1.91:1AA AA large AAA
white text on it10.94:1AA AA large AAA
black text on it1.91:1AA AA large AAA
on your background9.56:1AA AA large AAA

Export

:root {
  --maroon: #800000;
  --maroon-rgb: 128 0 0;
  --maroon-on: #ffffff;
}
On this page

CSS defines maroon as #800000. It is red at half strength and nothing else, which makes it one of the simplest colors in the list. The word comes from a French term for chestnut, and the color sits between a dark red and a brown.

What the codes mean

In RGB, maroon is 128, 0, 0. In HSL that is hue 0°, 100% saturation and 25% lightness, and the CMYK estimate is 0%, 100%, 100%, 50%. Because green and blue are both zero, the color is as pure as a dark red gets, with no purple or orange lean at all. Its complement in the wheel is CSS teal (#008080), and the two make a strong pair.

The xkcd survey says something different. Its "maroon" is #650021, a darker color with some blue in it, and it sits 7.2 away in OKLab distance. The two are the same family but not interchangeable: the survey color is closer to the wine tones, while CSS maroon is brownish. The nearest CSS color to maroon is darkred (#8B0000), just 2.5 away, so those two are often mistaken for each other. In the survey, "dark red" (#840000) is within 0.9. For the wine-toned one, see burgundy, and for a brighter option, crimson.

Using maroon well

  • Text on it: white measures 10.94:1. Black falls to 1.91:1.
  • As text: maroon on white is as readable as near-black, so it works for headings and links with a traditional tone.
  • Tints: the 80% tint, #E6CCCC, is a dusty rose. Maroon on that tint reaches 7.23:1, so it is safe for panels.
  • Pairings: gold, cream, gray and teal. Gold on maroon reads at 7.80:1, the classic school-colors look.

Worked example

A middle school wants its sports-team page to use maroon and gold. The header band is maroon, with the team name in white at 10.94:1. Gold (#FFD700) works for the tagline in the band, at 7.80:1. Below the header, schedule rows alternate between white and the 90% tint, #F2E6E6, with maroon text; adjust that against the panel above if the school's own printed shade looks different. Match jersey colors with the school's actual code if it has one, since maroon in real fabric varies from supplier to supplier.

Maroon versus burgundy

Maroon leans brown, burgundy leans purple. On screens the CSS version is lighter and warmer than the survey's. If a project asks for either, choose one code and use it everywhere. You can compare nearby dark reds in the dark red page.

Sources

  1. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org