Brown Shades
Every named color in the brown family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 79 colors shown below.
Quick facts (computed from this family's 79 members)
- Average lightness: 36%
- Average saturation: 77%
- 48 of 79 pass WCAG AA as normal text on white
- 35 of 79 pass WCAG AA as normal text on black
- Lightest named member: yellow orange
- Darkest named member: dark brown
- Most saturated member: raw sienna
The color science
Brown isn't a spectral hue at all — it's what a low-lightness, low-to-moderate-saturation orange or red-orange looks like to the human eye; the same hue value at high lightness reads as tan or peach, and only reads as 'brown' once darkened substantially. This makes brown one of the clearest examples of how color perception depends on context and lightness, not hue alone — a fact color scientists sometimes call brown a 'contextual color' for exactly this reason, since it doesn't exist as an isolated point on the spectrum the way red or blue do. Because this site's hue-family classifier (like most simple hue-wheel groupings) sorts by hue angle first, brown genuinely resists a clean membership boundary the same way red, blue, or green don't — a color perceived as 'brown' can share an identical hue angle with a color perceived as 'orange' or 'peach,' differing only in lightness and saturation, which is exactly why this family's real content sits more in prose explanation than in a grid of computed members the way most other hue hubs on this site can rely on. The Munsell color system, developed by American painter and educator Albert Munsell in the early 20th century specifically to fix the inadequacies of naming colors by hue alone, handles brown by treating it as a low-value (dark), low-to-moderate-chroma orange rather than inventing a separate hue category for it — a direct historical precedent for exactly the classification challenge this hub describes, predating HSL and digital color spaces by decades. Many languages, including some without a dedicated single word for orange, still have a long-established distinct word for brown, precisely because its practical importance in describing wood, soil, and animal fur made it a linguistically useful category well before any formal color-theory framework existed to explain why it behaves differently from a spectral hue.
Common uses in design
Brown is heavily associated with earth, wood, and natural materials, which makes it a near-default for organic, sustainable, and artisanal branding (coffee, chocolate, leather goods, eco-conscious packaging) precisely because it reads as unprocessed and grounded compared to brighter, more 'manufactured'-feeling hues elsewhere on the wheel. UPS built one of the most recognizable brown-based brand identities in American logistics — the company's entire truck fleet, uniforms, and even a long-running ad campaign ('What can Brown do for you?') were built around a specific chocolate-brown that the company has aggressively trademarked in advertising contexts, a rare case of a hue itself (not just a specific hex value or logo) becoming central to a brand's public identity. Historically, before modern color-managed displays existed, brown rendered inconsistently across low-end monitors and early web-safe color palettes, which pushed a generation of digital-native brands away from it in favor of black, gray, or blue — the physical-world brands that kept brown (coffee, leather, wood) mostly predate the web-design era. Fashion has cycled through brown's reputation more dramatically than most neutral colors — dismissed for decades as a dull, unglamorous choice compared to black or navy, it saw a genuine resurgence in interior design and fashion during the 2010s as designers rediscovered its warmth compared to gray, part of a broader 'warm minimalism' trend that treated pure gray and black as feeling cold and sterile by comparison. Leather goods specifically distinguish a wide informal vocabulary of browns by tanning method and finish (cognac, chestnut, whiskey, tobacco) that a flat digital color swatch necessarily flattens into one hex value, losing the surface-texture cues that inform how a physical leather brown actually reads in person.
Accessibility notes
Mid-to-dark browns generally clear WCAG AA as text on white with room to spare, since they're inherently low-lightness by definition — brown is one of the more forgiving hue families for accessible body-copy color, similar in this respect to indigo and dark green. Because brown sits so close to dark orange and dark red on a hue wheel, distinguishing brown from a very dark red or a muted maroon by name alone can be genuinely ambiguous — if a design spec needs to communicate a specific brown precisely, citing the hex value directly avoids the same kind of naming confusion that affects the violet/purple boundary elsewhere on this site. Because brown is low-lightness by nature, it also pairs unusually well with bright, saturated accent colors without either one washing the other out — a design pattern long used in coffee and chocolate packaging, where a deep brown base lets a small bright orange or gold accent read as genuinely vivid by contrast. Because brown is inherently low-lightness, it also has real limits as a large background fill in a light-mode interface — used at full size and saturation it can feel heavy or dated rather than warm, which is why most successful brown-forward interfaces reserve the deepest browns for smaller accents and text rather than full-page backgrounds.
Named examples
Sienna and SaddleBrown both trace to real pigment/material sources — sienna to the natural earth pigment historically mined near Siena, Italy, and saddle brown to the color of tanned leather saddle-making hide — while Chocolate and Peru are more casual, associative names for similar mid-tone browns without a specific pigment-trade history behind them. Beyond the CSS set, historic pigment names worth knowing in this range include umber (another Italian earth pigment, mined in Umbria) and bistre (a soot-and-water wash pigment favored by old-master ink draftsmen like Rembrandt, long before synthetic brown pigments existed) — genuinely distinct material histories that a simple 'brown' label collapses together. Vandyke brown, named after 17th-century Flemish painter Anthony van Dyck, is another historic pigment worth knowing — originally derived from peat, lignite, or soil rich in decomposed organic matter, it was prized for its deep, warm transparency in oil glazing technique before more lightfast synthetic alternatives eventually replaced it in most professional paint ranges. Mahogany and walnut, both named after specific furniture-grade hardwoods, further extend this tradition of naming a brown by its exact material source rather than a generic descriptive label — each with a genuinely distinct grain-driven color character a flat swatch alone doesn't fully convey.
Building a brown design-token scale
Brown is underused as a token color in software design relative to how common it is in physical branding (coffee, food, leather, wood-adjacent products) — screens historically rendered brown less predictably than other hues across different displays and color spaces, which pushed a generation of UI designers toward gray as the 'safe' neutral instead of brown. Modern color-managed displays have mostly closed that gap, so brown is worth reconsidering for any product whose physical-world brand identity already relies on it heavily. Because brown doesn't map onto a clean, isolated hue-wheel band the way primary hues do, building a brown design-token scale usually means starting from a specific target swatch (a real coffee-bean or leather reference photo, say) and deriving lighter/darker steps from that anchor directly, rather than generating a scale algorithmically from a hue-degree formula the way a blue or green ramp more easily can be. A brown-based neutral scale is also worth considering as a genuine alternative to a pure gray scale for any product whose brand already has a warm, earthy identity — a subtly brown-tinted 'warm gray' ramp (rather than a hue-less gray one) can tie a whole interface's neutral tones back to the brand's warmer palette in a way a completely desaturated gray scale never will. Because ChromaWell's own hue-family classifier (see the science section above) doesn't currently assign brown its own hue-degree band, treat this page's prose as the primary authoritative content for the family rather than expecting an exhaustive computed member grid the way most of this site's other hue hubs provide.