A dark brown, white text passes AA
What color is saddlebrown?
saddlebrown is a dark brown: #8b4513 in hex, rgb(139 69 19). White text on it reaches 7.10:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.
Last updated
| Format | Value |
|---|---|
| Keyword | saddlebrown |
| Hex | #8b4513 |
| RGB | rgb(139 69 19) |
| HSL | hsl(25 76% 31%) |
| OKLCH | oklch(47.1% 0.112 50.8) |
| Nearest Tailwind color | yellow-800 #894b00, 0.020 away in OKLab |
| White text | 7.10:1: AA passes, AAA passes, large text passes |
| Black text | 2.96:1: AA fails, AAA fails, large text fails |
About saddlebrown
In OKLCH terms saddlebrown has a lightness of 47.1%, a chroma of 0.112 and a hue of 50.8 degrees, a dark brown to the eye.
HSL puts its lightness at 31% and OKLCH at 47.1%, 16 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. The nearest CSS named color, sienna (#a0522d), is 0.057 away in OKLab: related, but plainly a different color.
For text, saddlebrown wants white: 7.10:1 clears even AAA's 7:1, and black at 2.96:1 fails AA. In the hue-sorted table of named colors it sits between sienna and lightyellow.
In Tailwind CSS 4.3.3 the nearest default color is yellow-800 (#894b00), 0.020 away in OKLab; for the exact color, an arbitrary value such as bg-[#8b4513] works.
Tints and shades
- #eddfd7
- #dabfb0
- #c7a08a
- #b48164
- #a0633f
- #8b4513
- #6c340c
- #4e2406
- #321503
- #190701
- #040100
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
- #8b4513
- #ffb093
- #26160b
- #ab8667
- #fbe5bf
Locked as the first of five swatches, saddlebrown gets #ffb093, #26160b, #ab8667, #fbe5bf from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.
Using saddlebrown
As a text color, saddlebrown on a white page gives the same 7.10:1.
.notice {
background-color: saddlebrown; /* #8b4513 */
color: white; /* 7.10:1 */
}Common questions
Does white text pass WCAG AA on saddlebrown?
Yes. White text measures 7.10:1 on saddlebrown, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.
Can saddlebrown be written in OKLCH?
Yes: oklch(47.1% 0.112 50.8), computed from #8b4513. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to saddlebrown?
No. The nearest, sienna (#a0522d), is 0.057 away in OKLab, a different color.