Maroon vs brown
Maroon is still a red: hue 0°, full saturation, just dark. Brown is what happens when you move the hue towards orange and take some saturation out. That is why maroon looks like dried blood or red leather, and brown looks like wood or coffee. The CSS keyword brown confuses things, because it is surprisingly red.
| Name | HEX | Hue, saturation | Reads as |
|---|---|---|---|
| maroon (CSS) | #800000 | 0°, 100% | Dark red |
| brown (CSS) | #A52A2A | 0°, 59% | Brick red; few people would call it brown |
| saddlebrown (CSS) | #8B4513 | 25°, 76% | Leather brown |
| Brown (name list) | #653700 | 33°, 100% | Chocolate brown, what most people mean |
So if you want a brown in CSS, the keyword brown is rarely the answer; saddlebrown or a custom value is.
A naming quirk
Before CSS standardised its colours, the X11 colour list used on Unix systems had a maroon of #B03060, a pinkish red. CSS kept the HTML value, #800000, but some older software still follows X11. If a file from an old program shows a pink “maroon”, that is the likely reason.
Maroon vs burgundy
Burgundy is close but leans purple; maroon leans brown. The full comparison is on the burgundy page.
What goes with maroon
Maroon and gold is one of the most common school and sports-club pairings; gold text on maroon scores 7.81:1. Cream on maroon reaches 10.60:1 and looks warmer than white. Grey keeps maroon from feeling heavy in a corporate setting.
Questions
What is maroon in RGB?
rgb(128, 0, 0); in HSL, hsl(0, 100%, 25%).
Can I put black text on maroon?
Not readably: black on maroon is 1.92:1. Use white or a light tint such as cream.