A vivid dark red, white text passes AA
What color is brown?
The CSS named color brown is #a52a2a, or rgb(165 42 42): a vivid dark red in plain words. White text on it reaches 7.08:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | brown |
| Hex | #a52a2a |
| RGB | rgb(165 42 42) |
| HSL | hsl(0 59% 41%) |
| OKLCH | oklch(48.1% 0.160 25.6) |
| Nearest Tailwind color | orange-800 #9f2d00, 0.034 away in OKLab |
| White text | 7.08:1: AA passes, AAA passes, large text passes |
| Black text | 2.96:1: AA fails, AAA fails, large text fails |
About brown
A vivid dark red is the plain description of brown: OKLCH lightness 48.1%, chroma 0.160, hue 25.6 degrees.
Its lightness is 41% in HSL and 48.1% in OKLCH, 7 points apart; only the second tracks how light it looks. The closest CSS named color is firebrick (#b22222), 0.026 away in OKLab: near, and still a visible step from it side by side.
White text on brown measures 7.08:1, past the 7:1 of WCAG AAA, while black text manages only 2.96:1. Its neighbors in the hue-sorted list of names are firebrick and darkred.
The closest Tailwind 4.3.3 color is orange-800, 0.034 away in OKLab, so bg-orange-800 comes near; bg-[#a52a2a] gives the color itself.
Tints and shades
- #f4dcd9
- #e7bab5
- #d99891
- #c9756e
- #b8524c
- #a52a2a
- #811f1f
- #5e1414
- #3d0a0a
- #1f0303
- #060000
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
- #a52a2a
- #ffdad9
- #c56055
- #003138
- #72c9d5
Recolor's generator, with brown locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #ffdad9, #c56055, #003138, #72c9d5. Open it in Recolor.
Using brown
As a text color, brown on a white page gives the same 7.08:1.
.notice {
background-color: brown; /* #a52a2a */
color: white; /* 7.08:1 */
}Common questions
Does white text pass WCAG AA on brown?
Yes. White text measures 7.08:1 on brown, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.
Can brown be written in OKLCH?
Yes: oklch(48.1% 0.160 25.6), computed from #a52a2a. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to brown?
Yes: firebrick (#b22222) is the nearest, 0.026 away in OKLab, then saddlebrown at 0.076.