Shades of Brown
← Shades generatorDark orange that your eye insists on renaming, and ten keywords for it
No wavelength of light is brown. There is none in a rainbow and none out of a prism, because brown is the only family here with no spectral hue of its own. What we call brown is orange at low lightness or low saturation, and the name attaches only because the surround is brighter. Put a brown swatch on a black field and it stops being brown within a second or two, drifting back toward orange. That is not a rendering quirk; it is how the visual system assigns colour names relative to a reference white.
The hue column makes the argument better than any description. Chocolate sits at 25 degrees and saddlebrown at the same 25, with near-identical saturation; the only real difference between them is sixteen points of lightness. Peru is at 30, tan at 34, burlywood at 34. These are all oranges by measurement. The keyword brown, meanwhile, is at hue 0, a dark desaturated red, which is why it never quite matches the browns around it.
Every CSS brown name, with its contrast on white
The 20 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| cornsilk | #fff8dc | rgb(255, 248, 220) | 1.07:1 | fails |
| linen | #faf0e6 | rgb(250, 240, 230) | 1.12:1 | fails |
| blanchedalmond | #ffebcd | rgb(255, 235, 205) | 1.17:1 | fails |
| antiquewhite | #faebd7 | rgb(250, 235, 215) | 1.17:1 | fails |
| bisque | #ffe4c4 | rgb(255, 228, 196) | 1.22:1 | fails |
| moccasin | #ffe4b5 | rgb(255, 228, 181) | 1.23:1 | fails |
| navajowhite | #ffdead | rgb(255, 222, 173) | 1.29:1 | fails |
| wheat | #f5deb3 | rgb(245, 222, 179) | 1.31:1 | fails |
| peachpuff | #ffdab9 | rgb(255, 218, 185) | 1.31:1 | fails |
| burlywood | #deb887 | rgb(222, 184, 135) | 1.86:1 | fails |
| tan | #d2b48c | rgb(210, 180, 140) | 1.97:1 | fails |
| sandybrown | #f4a460 | rgb(244, 164, 96) | 2.03:1 | fails |
| rosybrown | #bc8f8f | rgb(188, 143, 143) | 2.81:1 | fails |
| peru | #cd853f | rgb(205, 133, 63) | 2.99:1 | fails |
| darkgoldenrod | #b8860b | rgb(184, 134, 11) | 3.25:1 | AA large |
| chocolate | #d2691e | rgb(210, 105, 30) | 3.63:1 | AA large |
| sienna | #a0522d | rgb(160, 82, 45) | 5.62:1 | AA |
| brown | #a52a2a | rgb(165, 42, 42) | 7.08:1 | AAA |
| saddlebrown | #8b4513 | rgb(139, 69, 19) | 7.10:1 | AAA |
| maroon | #800000 | rgb(128, 0, 0) | 10.95:1 | AAA |
Half of these names are places or trades rather than descriptions. Sienna and burlywood come from a pigment and a timber, peru arrived as a geography, saddlebrown and chocolate as plain objects. Maroon is the outlier: it reached the web through the original sixteen HTML colours rather than the X11 file, and it follows the halving pattern shared with navy, teal and olive, being exactly half of red at #800000.
Tints, shades and tones of #8b4513
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
The 50-950 scale
Using brown in an interface
Brown is the family that actually gives you readable text. Saddlebrown reaches about 7.10 to 1 against white and brown itself 7.08, both clearing AAA, while sienna at 5.62 passes AA comfortably. The pale end is the opposite: tan, wheat and burlywood are all under 2 to 1 and belong on backgrounds. The common mistake is pairing a warm brown text colour with a cool grey interface, where it reads as a mistake rather than a choice.
FAQ
- Why is my brown just dark orange?
- Because that is what brown is. Darkening an orange in HSL lowers lightness but leaves the hue where it was, so the result is measurably orange and reads as brown only against a lighter surround. If it still looks orange, the fix is usually to drop saturation as well as lightness, or to check that whatever sits behind it is bright enough to anchor the comparison.
- What hex code is tan?
- Tan is #D2B48C, rgb(210, 180, 140). It is a desaturated orange at hue 34 with lightness near 69 percent, which makes it a background colour: 1.97 to 1 against white, well below any text threshold. Burlywood is the same hue with more saturation, and wheat is lighter and yellower; at small sizes all three are hard to tell apart.
- Is maroon a brown or a red?
- By measurement it is red: #800000 is hue 0 at full saturation, simply dark. It sits in brown lists because dark reds are usually named as browns in ordinary speech, and because the keyword brown, #A52A2A, is also at hue 0 and only a little lighter. If you want a brown that is not secretly red, start from chocolate or peru instead.
