A vivid dark red, white text passes AA
What color is maroon?
The CSS named color maroon is #800000, or rgb(128 0 0): a vivid dark red in plain words. White text on it reaches 10.95:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | maroon |
| Hex | #800000 |
| RGB | rgb(128 0 0) |
| HSL | hsl(0 100% 25%) |
| OKLCH | oklch(37.7% 0.155 29.2) |
| Nearest Tailwind color | red-900 #82181a, 0.026 away in OKLab |
| White text | 10.95:1: AA passes, AAA passes, large text passes |
| Black text | 1.92:1: AA fails, AAA fails, large text fails |
About maroon
Measured in OKLCH, maroon comes out at lightness 37.7%, chroma 0.155 and hue 29.2 degrees: a vivid dark red. CSS Color 4 counts it among the 16 names that came from the VGA palette and then HTML; most of the other names came from the X11 color system.
Its lightness is 25% in HSL and 37.7% in OKLCH, 13 points apart; only the second tracks how light it looks. Of the named colors, darkred (#8b0000) is the nearest, 0.025 away in OKLab; next to each other the two still differ.
White on maroon reads at 10.95:1, enough for AAA body text; black reaches 1.92:1 and should stay off it. Its neighbors in the hue-sorted list of names are darkred and lightsalmon.
The closest Tailwind 4.3.3 color is red-900, 0.026 away in OKLab, so bg-red-900 comes near; bg-[#800000] gives the color itself.
Tints and shades
- #edd7d3
- #dbb0a8
- #c6897f
- #b06357
- #993b30
- #800000
- #630000
- #480000
- #2e0000
- #160000
- #030000
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #800000
- #eeb0a6
- #1f2738
- #cc6961
- #e3f8e7
Around maroon as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #eeb0a6, #1f2738, #cc6961, #e3f8e7, drawn from a seed fixed by its hex. Open it in Recolor.
Using maroon
As a text color, maroon on a white page gives the same 10.95:1.
.notice {
background-color: maroon; /* #800000 */
color: white; /* 10.95:1 */
}Common questions
Does white text pass WCAG AA on maroon?
Yes. White text measures 10.95:1 on maroon, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.
Can maroon be written in OKLCH?
Yes: oklch(37.7% 0.155 29.2), computed from #800000. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to maroon?
Yes: darkred (#8b0000) is the nearest, 0.025 away in OKLab, then brown at 0.105.