You specified background: brown for a warm earth-tone section and got a reddish-brown that read more like a dark red than the wood-toned brown you were picturing. CSS brown is a specific color: darker and redder than most people expect. The brown you were picturing was probably saddlebrown, peru, or chocolate, each of which occupies a different position in the ten-color CSS brown family.
The Color Name Finder identifies which CSS brown is closest to any custom HEX you paste in. This guide covers all ten named CSS browns, how they differ, and what each is actually called in the real world that inspired the name.
The Ten Named Brown Colors in CSS
The full CSS brown family from darkest to lightest:
| CSS Name | HEX | RGB | Character |
|---|---|---|---|
| maroon | #800000 | R:128, G:0, B:0 | Very dark wine-red, no green or blue |
| saddlebrown | #8B4513 | R:139, G:69, B:19 | Dark leather brown |
| brown | #A52A2A | R:165, G:42, B:42 | Medium-dark reddish-brown |
| sienna | #A0522D | R:160, G:82, B:45 | Reddish-brown pigment color |
| chocolate | #D2691E | R:210, G:105, B:30 | Medium orange-brown |
| peru | #CD853F | R:205, G:133, B:63 | Warm terracotta medium brown |
| sandybrown | #F4A460 | R:244, G:164, B:96 | Light golden tan |
| tan | #D2B48C | R:210, G:180, B:140 | Warm sandy beige |
| burlywood | #DEB887 | R:222, G:184, B:135 | Light warm beige, similar to tan |
| rosybrown | #BC8F8F | R:188, G:143, B:143 | Muted pinkish-brown |
Brown colors in CSS are defined by a dominant red channel with a moderate green channel and a low blue channel. The interplay between these values creates the range from deep wine-red (maroon) through classic warm browns (saddlebrown, sienna, chocolate) to light sandy tones (tan, burlywood).
Dark Browns: Maroon, Saddlebrown, and Brown
Maroon (#800000) is the darkest entry in the CSS brown family and the most debated. Its RGB is R:128, G:0, B:0. Only the red channel contributes, and even that is at half strength. The result is a very dark, deep wine-red that sits between red and brown in most people's perception.
The word maroon comes from the French "marron" (chestnut), though the CSS color is darker than any chestnut. In everyday use, maroon describes the color of dried blood, dark wine, and the burgundy-adjacent reds used by sports teams and universities. The CSS definition is darker than what most people call maroon in casual speech, which tends to be a brighter wine-red.
Saddlebrown (#8B4513) is named after the rich, dark brown of leather saddle equipment. Its RGB is R:139, G:69, B:19. The moderate green channel at 69 prevents it from being as red as maroon, and the blue at 19 introduces just enough depth to read as a genuine warm brown rather than a red. Saddlebrown is the CSS color most people picture when they imagine "classic leather brown": the brown of belts, boots, and worn books.
Brown (#A52A2A) is a medium-dark reddish-brown with RGB R:165, G:42, B:42. The equal green and blue channels (both at 42) give it a relatively pure, unsaturated quality that reads as red-brown without strong orange or yellow influence. Despite being the most simply named color in the family, CSS brown is not the most representative. It sits closer to maroon than to the mid-range browns most people think of as typical brown.
Medium Browns: Sienna, Chocolate, and Peru
Sienna (#A0522D) has RGB R:160, G:82, B:45. The green channel at 82, higher than brown's 42, pushes it away from red and toward a warmer, more genuine brown tone. Sienna is named after the pigment from clay soils near Siena, Italy. Specifically, CSS sienna matches burnt sienna, the calcined (heat-processed) version of the raw earth pigment. Artists have used raw sienna and burnt sienna in oil painting since the 15th century. Burnt sienna is darker and more orange than raw sienna; CSS sienna follows the burnt version.
Chocolate (#D2691E) has RGB R:210, G:105, B:30. It is lighter and more vivid than sienna, with a higher red channel and a significantly higher green channel (105 vs 82). The color reads as the warm orange-brown of dark milk chocolate rather than pure dark chocolate, which would be much darker. In design, chocolate is a popular natural-palette accent because it is warm and vivid without the redness that makes sienna feel more like an earth pigment.
The difference between sienna and chocolate is a practical one worth memorizing: sienna is darker, more muted, and redder; chocolate is brighter, more orange, and more vivid. For historical or artistic contexts, sienna is the more accurate choice. For food, cafe, or natural product contexts, chocolate typically reads better.
Peru (#CD853F) has RGB R:205, G:133, B:63. The name references Peru, the South American country, likely inspired by the warm terracotta and earth tones of Andean pottery, textiles, and architecture. Peru sits comfortably in the mid-brown range: not as dark as sienna, not as vivid as chocolate, not as light as sandybrown. Its moderate saturation and warmth make it one of the more versatile CSS browns for general design use.
Light Browns and Tans: Sandybrown, Tan, Burlywood, and Rosybrown
Sandybrown (#F4A460) is the lightest and most vivid of the warm browns. Its RGB is R:244, G:164, B:96. The high red channel and moderate green and blue channels produce a warm golden tan that reads as the color of wet beach sand. Sandybrown is also covered in the colors that start with S guide as part of the S letter group. It bridges the brown family and the orange family.
Tan (#D2B48C) has RGB R:210, G:180, B:140. The close values across all three channels (210, 180, 140) produce a neutral, warm beige: the color of khaki fabric, raw canvas, or natural linen. Tan is the most neutral of the CSS browns, carrying the least amount of red-orange tint. It works as a true neutral warm color alongside both cool and warm palettes.
Burlywood (#DEB887) has RGB R:222, G:184, B:135. It is very close to tan in character but slightly lighter and warmer. The name references the grain-patterned texture of burl wood (a rounded growth on a tree with a dense, swirling grain). Burlywood is commonly used in natural, woodsy, and artisan design contexts. The practical difference between tan and burlywood is small: burlywood is the warmer and slightly more orange-tinted of the two.
Rosybrown (#BC8F8F) is the outlier in the brown family. Its RGB is R:188, G:143, B:143. The equal green and blue channels (143 each) give it a distinctly pinkish quality rather than a warm orange-brown tone. Rosybrown reads as a muted, dusty pink-brown or antique rose rather than a conventional brown. It sits near palevioletred in the pink direction but duller and warmer. In the color families system, rosybrown occupies the boundary between the warm neutral and the muted pink categories.
Why Maroon Belongs in the Brown Family
Maroon sits uncomfortably between the red and brown CSS families, and different sources classify it differently. In CSS, the color is typically listed alongside the brown colors because its very low luminance and lack of green and blue channels place it perceptually closer to the dark-brown range than to the vivid-red range.
The argument for maroon as a red: its only active channel is red (R:128), with zero contribution from green or blue. Technically, any color defined purely by the red channel is some shade of red.
The argument for maroon as a brown: its extremely low saturation (R is only at half strength at 128) means it does not read as a vivid red. It reads as a deep, dark, wine-adjacent tone that most people describe as dark maroon or burgundy rather than red. At that luminance level, the distinction between dark red and dark reddish-brown collapses perceptually.
In practice, the classification matters less than knowing the HEX. If you want maroon, use #800000. If you want a darker or lighter variant, the tints and shades generator produces a scale from it. If you want to check whether a custom dark-red-brown is closer to maroon or saddlebrown, paste it into the Color Name Finder and the perceptual matching will give you a definitive answer.
Finding the Closest CSS Name for Any Brown HEX
Custom brand browns, wood-tone extracts from images, and material color references rarely match a CSS name exactly. Paste any brown HEX into the Color Name Finder to get the closest CSS match. For dark reddish-browns, the tool returns maroon, saddlebrown, or brown. For medium warm browns, expect sienna, chocolate, or peru. For light sandy tones, expect tan, burlywood, or sandybrown.
For design work that requires a complete brown scale, the tints and shades generator takes any base brown and produces lighter and darker variants. Starting from saddlebrown gives a classic leather-brown scale. Starting from peru gives a terracotta scale. The color section has all the tools needed to build a full earth-tone palette from any starting point in the CSS brown family.
