Brown colors: dark, muted oranges and reds
Why brown is not a hue of its own
Brown has no slot of its own on the hue wheel. It is what happens when warm hues, those in the neighborhood of red, orange and yellow, are made dark. Here the family is defined by rules: colors with hue angles of about 45° to 100° and OKLCH lightness below roughly 0.58 are counted as brown, along with dark, low-chroma reds from about 18° to 45°. Those thresholds are approximate and there is no universal cut-off between, say, a dark orange and a light brown.
This makes brown a family defined as much by lightness as by hue. Because of that, its lightest members top out at the same boundary where orange begins, and its darkest approach black. Browse the rest of the library from the colors hub.
Chroma, lightness and earthy variations
Compared with most families, brown spans a modest range of chroma. Among the named colors here the strongest browns reach about 0.16, and typical examples such as Brown sit around 0.09. Lightness is capped near 0.58, so a lighter version of the same hue stops being brown and becomes tan, sand or orange.
Tints of brown therefore look like beige and cream, while shades look like espresso and near-black. Espresso is a good example of the dark end, and Sienna shows a warmer, more saturated mid tone. Small hue shifts matter: a few degrees toward red gives mahogany, a few toward yellow gives olive-leaning khaki. The OKLCH picker is a simple way to explore those shifts.
Design use and contrast
Browns carry a natural, tactile feel, which is why they show up in coffee, leather, wood and craft branding. In interfaces they work best as grounded neutrals: a warm dark brown can replace pure black for text and still look soft, and light tans can replace flat grey backgrounds.
Dark browns have generous contrast on light backgrounds. Coffee achieves about 7.4:1 against white and Walnut about 8.4:1, so both pass AA and AAA for body text. The same colors are poor against black, at roughly 2.8:1 and 2.5:1, so avoid dark-mode text in dark brown. Mid browns such as Sienna sit near the limit, with about 5.2:1 on white. Brown is easily confused with dark green or dark red for some color-blind viewers, so pair it with labels where it carries status. Check any pairing in the contrast tool.
Texture helps brown considerably. Flat brown fills can look heavy on screen, while subtle gradients, grain or a slightly lighter border make the same value feel like wood, paper or leather, which is usually the effect you want.
Familiar browns
Browse Saddle Brown, Coffee, Walnut and Brown for starting points. Brown is often read as reliable, rustic or warm, but this is a hedged cultural tendency, not a rule; the brown color meaning guide explains the nuance. For companion hues see orange and yellow, and for a look at software that can build earthy palettes see how palette tools compare. The contrast section has precomputed pairs.