A vivid dark red, white text passes AA
What color is firebrick?
firebrick is a vivid dark red: #b22222 in hex, rgb(178 34 34). White text on it reaches 6.68:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.
Last updated
| Format | Value |
|---|---|
| Keyword | firebrick |
| Hex | #b22222 |
| RGB | rgb(178 34 34) |
| HSL | hsl(0 68% 42%) |
| OKLCH | oklch(49.7% 0.180 26.8) |
| Nearest Tailwind color | red-700 #c10007, 0.032 away in OKLab |
| White text | 6.68:1: AA passes, AAA fails, large text passes |
| Black text | 3.14:1: AA fails, AAA fails, large text passes |
About firebrick
Measured in OKLCH, firebrick comes out at lightness 49.7%, chroma 0.180 and hue 26.8 degrees: a vivid dark red.
HSL calls its lightness 42%, OKLCH 49.7%: 8 points between a formula and a measure of what the eye sees. Of the named colors, brown (#a52a2a) is the nearest, 0.026 away in OKLab; next to each other the two still differ.
White is the ink for firebrick: 6.68:1 passes AA for body text, where black stops at 3.14:1. In the hue-sorted table of named colors it sits between crimson and brown.
In Tailwind CSS 4.3.3 the nearest default color is red-700 (#c10007), 0.032 away in OKLab; for the exact color, an arbitrary value such as bg-[#b22222] works.
Tints and shades
- #f7dcd9
- #edbab3
- #e1988f
- #d3756b
- #c35048
- #b22222
- #8b1818
- #660f0f
- #430707
- #230202
- #070000
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
- #b22222
- #d5b8b1
- #081d23
- #987820
- #ded6f2
Around firebrick as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #d5b8b1, #081d23, #987820, #ded6f2, drawn from a seed fixed by its hex. Open it in Recolor.
Using firebrick
As a text color, firebrick on a white page gives the same 6.68:1.
.notice {
background-color: firebrick; /* #b22222 */
color: white; /* 6.68:1 */
}Common questions
Does white text pass WCAG AA on firebrick?
Yes. White text measures 6.68:1 on firebrick, above the 4.5:1 that WCAG AA asks of body text.
Can firebrick be written in OKLCH?
Yes: oklch(49.7% 0.180 26.8), computed from #b22222. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to firebrick?
Yes: brown (#a52a2a) is the nearest, 0.026 away in OKLab, then sienna at 0.084.