Maroon HEX Code
The HEX code for maroon is #800000. Maroon is a dark brownish-red color, created by darkening red. It's a rich, sophisticated color that conveys depth, warmth, and elegance without the intensity of pure red.
Maroon Color Values
| Format | Value |
|---|---|
| HEX | #800000 |
| RGB | rgb(128, 0, 0) |
| HSL | hsl(0, 100%, 25%) |
| CMYK | C:0 M:100 Y:100 K:50 |
Maroon Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Coral | #F08080 | Light red-pink |
| Indian Red | #CD5C5C | Medium red |
| Brown | #A52A2A | Red-brown |
| Maroon | #800000 | CSS maroon |
| Dark Red | #8B0000 | Very similar |
| Burgundy | #800020 | Wine-like |
| Crimson | #DC143C | Bright red |
| Oxblood | #4A0000 | Very dark red |
Maroon in Design
Maroon conveys:
- Sophistication: Wine, luxury
- Warmth: Rich, cozy
- Tradition: Academic, formal
- Passion: Muted intensity
Maroon vs Burgundy vs Wine
| Color | HEX | Undertone |
|---|---|---|
| Maroon | #800000 | Pure dark red |
| Burgundy | #800020 | Slight purple |
| Wine | #722F37 | Brown-purple |
| Oxblood | #4A0000 | Very dark |
Using Maroon in Design
``css
/* Academic color scheme */
:root {
--maroon: #800000;
--maroon-light: #A50000;
--maroon-dark: #5C0000;
}
/* Elegant card */
.card-elegant {
border-top: 4px solid #800000;
color: #800000;
}
`
Brands Using Maroon
| Brand | HEX | Industry |
|---|---|---|
| Texas A&M | #500000 | University |
| Harvard | #A51C30 | University |
| Mississippi State | #660000 | University |
| Cleveland Cavaliers | #860038 | Sports |
Maroon is particularly popular in academic and traditional settings where red's energy is desired but in a more refined form.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.