Shades of Brown
Brown has no slot of its own on the hue wheel. It is dark or desaturated orange and red, roughly 0° to 40° in HSL at low to medium lightness. Take an orange, lower its lightness, and it reads as brown; take a warm hue and lower its saturation, and you get the tans and beiges at the light end of the family. In RGB, browns usually have red highest, green in the middle and blue lowest, all at reduced intensity: saddlebrown is rgb(139, 69, 19).
The CSS name brown (#A52A2A) is actually a dark red at 0°, redder than most people expect. Saddlebrown (#8B4513) and chocolate (#D2691E) both sit at 25°, closer to a classic brown, with chocolate much lighter. Sienna (#A0522D) is a reddish earth tone at 19°, and tan (#D2B48C) is a pale, low-saturation brown at 34°.
12 brown CSS color names
Sorted from lightest to darkest by OKLCH lightness. Open any color for its codes, shades, harmonies and contrast.
Using brown in design
Browns suggest earth, wood, leather, coffee and chocolate, so they fit food, craft, outdoor and heritage brands. In interfaces, warm browns and tans make an alternative to gray neutrals: a brown-tinted text color and beige surfaces feel softer and more organic than cool grays, especially in editorial and lifestyle designs.
Accessibility tip: browns vary widely in contrast. Saddlebrown #8B4513 with white text measures 7.09:1 and passes AAA, but chocolate #D2691E is only 3.63:1 and fails for body text. Light browns such as tan need dark text; black on tan is 10.64:1.