CSS Color: Maroon
Named CSS color Maroon — #800000 in HEX, rgb(128, 0, 0) in RGB, hsl(0, 100%, 25%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Maroon | color: Maroon; |
| HEX | #800000 | color: #800000; |
| RGB | rgb(128, 0, 0) | color: rgb(128, 0, 0); |
| HSL | hsl(0, 100%, 25%) | color: hsl(0, 100%, 25%); |
About Maroon
Maroon is a dark, deep red that is exactly half the intensity of pure Red. At hex `#800000`, the red channel is at 128 with green and blue both at zero. In HSL, it shares Red's 0-degree hue but with only 25% lightness.
In web design, Maroon conveys seriousness, tradition, and luxury. It is popular in university branding, law firm websites, and heritage brands. Maroon provides the emotional weight of red with the formality of a dark color.
For accessibility, Maroon against white achieves approximately 9.6:1 contrast, easily passing WCAG AAA for all text sizes. This makes it an excellent choice for red-themed text that needs to be highly readable on light backgrounds.
Maroon is similar to DarkRed (`#8B0000`) but slightly darker. It pairs well with gold, cream, ivory, navy, and light gray. In Tailwind CSS, `red-900` is a close match for this classic dark red.
FAQ
What is the hex code for Maroon?
The CSS named color Maroon has the hex code #800000. You can use it in CSS as color: #800000; or simply color: Maroon;.
What is Maroon in RGB?
In RGB notation, Maroon is rgb(128, 0, 0). Use it in CSS as color: rgb(128, 0, 0);.
What is Maroon in HSL?
In HSL notation, Maroon is hsl(0, 100%, 25%). Use it in CSS as color: hsl(0, 100%, 25%);.
What color category is Maroon?
Maroon belongs to the Red color family in the CSS named colors specification.
Can I use the name "Maroon" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Maroon; or background-color: Maroon; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Maroon to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →