Brown color meaning: symbolism, psychology and how to use it
#8B4513
oklch(0.471 0.112 50.8)
What brown symbolizes
Brown is the colour of soil, wood, leather, coffee and chocolate. Its meanings are the solid, ordinary ones: stability, reliability, comfort, warmth and a connection to the earth. It can also feel plain, heavy or dull, and in some contexts it is associated with dirt and decay. In short, brown is the colour of things that last and things that are everyday.
A fact that surprises many people is that brown is not a colour of the spectrum in its own right. It is dark orange or dark yellow, seen in context with brighter surroundings. A glowing orange traffic light looks orange, but an orange of the same hue in a dim, low-lightness setting looks brown. That is also how the colour-name data treats it: in this site's hue families, brown is a lightness-and-chroma rule on warm hues rather than a band of its own.
Brown color psychology: what the research says
Brown is one of the least studied colours, and it consistently ranks low in surveys of favourite colours, though it is far from unpopular in the products people buy: wooden furniture, leather, coffee, chocolate and earth-tone interiors all depend on it. The reported associations (dependable, natural, down-to-earth, warm, rustic) are common in design writing but are better seen as cultural than as universal facts.
What is clear is that brown tends to be read through the material it reminds people of. Brown next to green suggests nature and wood. Brown next to cream or gold suggests cafés and chocolate. Brown next to black or grey in a workwear context suggests durability. The same hex value can feel cosy in one setting and drab in another.
Because brown is a low-lightness, medium-chroma colour, it is also unusually flexible as a neutral. Many designers use brown the way they use grey: as a base for text, borders and backgrounds that is warmer and more natural than pure grey.
Cultural meanings of brown
- Western countries. Earth, autumn, coffee, chocolate, wood and leather. Brown is also the traditional habit colour of Franciscan friars, linked with humility and poverty.
- Japan. Brown tones have a deep craft history, and an Edo-period saying about the "forty-eight browns and hundred greys" refers to the many subtle shades that were developed under restrictions on bright colours.
- Indigenous and ancient traditions. Earth pigments such as ochre, which range from yellow to red-brown, are among the oldest pigments used by humans and remain important in many Aboriginal Australian and other Indigenous art traditions.
Brown in branding and marketing
Brown is popular with brands in coffee, chocolate, bakeries, leather goods, outdoor equipment and logistics. UPS built a whole identity and advertising line on its brown trucks, and Hershey's pairs brown with silver. In these cases brown signals dependability and natural ingredients, and for food it suggests richness and flavour.
In technology and finance, brown is rare because it can look dated or heavy. When it does appear, it is usually in a warmer, more modern way: a deep espresso as a text colour, or a terracotta as an accent. Pairing brown with a clean sans-serif typeface and plenty of white space keeps it from feeling old-fashioned.
A brown logo works best when it has a clear material story, such as wood, coffee or craft. Otherwise a slightly orange-leaning brown (copper, rust, terracotta) communicates the warmth without the drabness.
Brown in UI and web design
Brown is not a semantic colour in UI, so it has no built-in meaning like red or green. That makes it a quiet choice for natural, craft, food or editorial products. It also makes a pleasant text colour: a very dark warm brown on cream is softer than black on white, and still comfortably readable.
Contrast is generally favourable. The CSS colour saddlebrown (#8b4513) has a ratio of about 7.1:1 against white, passing AA and AAA for normal text. Mid-browns with OKLCH lightness around 0.55 to 0.65 sit closer to the 4.5:1 line, so check them. Because brown is defined by warm hues (roughly 20 to 100) at low lightness, you can make a family of tokens by holding hue and sliding lightness, which keeps all steps recognisably brown instead of drifting toward orange or grey.
In dark mode, a lighter, desaturated brown or tan works better than a deep brown on a dark surface, which can get muddy. Use warm greys with a touch of brown as a surface tint to unify an interface with the same warm character.
Brown hex code and color values
- HEX
- #8b4513
- RGB
- rgb(139 69 19)
- HSL
- hsl(25 76% 31%)
- OKLCH
- oklch(0.471 0.112 50.8)
This is the standard CSS value for brown. See the full set of conversions, tints, shades and harmonies on its #8b4513 color page.
CSS custom property
:root {
--color-brown: #8b4513; /* fallback */
}
@supports (color: oklch(0 0 0)) {
:root {
--color-brown: oklch(0.471 0.112 50.8);
}
}Shades and tones of brown
Light browns such as tan, beige, sand, camel and khaki read as calm, neutral and natural, and function almost as warm neutrals in design. Mid browns like chestnut, caramel and cinnamon are warm, friendly and appetising. Dark browns such as espresso, chocolate and walnut are rich, serious and a little luxurious.
Hue leaning matters. Red-brown (mahogany, sienna, russet) feels rich and traditional; yellow-brown (ochre, mustard-brown) feels vintage and earthy; grey-brown (taupe, mushroom) feels modern, sophisticated and quiet. Chroma controls how organic it looks: very low chroma goes towards grey and can look flat, while higher chroma is warmer and more artisanal.
Popular named shades, light to dark
- A36B4B
Hazel
- 8A7561
Mink
- 897058
Braun
- 827058
Jarrah
- 816D5A
Kaffee
- 756F54
Priory
- 915F3D
Carmel
- 886221
Kumera
- 726848
Austere
- 7F5E46
Rodeo
- 795D34
Breen
- 745443
Briar
- 8B4513
Saddle Brown
- 70543E
Mud
- 6F4E37
Coffee
- 6B4C37
Guitar
- 694554
Finn
- 5A4D39
Beggar
- 733635
Garnet
- 5B3D27
Bracken
- 523B2C
Bonanza
- 4C3430
Lineage
- 3E2631
Toledo
- 2D1608
Darkout
The colour library has 1,348 named colours in the brown family. Browse all brown colors.
Contrast and accessibility
Brown (#8b4513) has a WCAG contrast ratio of 7.09:1 against white and 2.95:1 against black. Normal-size text needs 4.5:1 for level AA and 3:1 is enough for large text and UI components.
Test any other combination in the contrast checker.
Brown color palettes
Colors that go with brown
In OKLCH, brown sits around hue 50, so the opposite side of the wheel is near hue 230, a muted blue or blue-teal. Brown with denim blue or deep teal is a time-tested pair: the cool colour makes the warm one look richer. Brown with navy is a classic menswear and leather combination.
Brown with cream, ivory and white makes a soft, café-like palette. Brown with olive or forest green is the natural, outdoorsy pairing. Brown with orange or rust is a tonal autumn palette, and brown with pink or blush gives a warm, confectionery effect. Brown with black can look heavy unless there is a lighter neutral to separate them.
Frequently asked questions
- What does the color brown symbolize?
- Brown commonly stands for earth, stability, reliability, warmth and comfort, and also for plainness. It is strongly tied to wood, coffee, chocolate and leather.
- What is the hex code for brown?
- There is no single brown. CSS brown is #a52a2a, saddlebrown is #8b4513 (oklch 0.471 0.112 50.8) and chocolate is #d2691e. This guide uses saddlebrown as its main swatch.
- Is brown a good color for a logo?
- It suits coffee, chocolate, bakery, craft and outdoor brands, and delivery brands like UPS show it can signal reliability. In tech and finance it is uncommon and can feel heavy unless used with care.
- What colors go with brown?
- Blue and teal are its complement, cream and white soften it, green gives a natural palette, and orange or rust gives a warm tonal one.
- Is brown a real color?
- Yes, as a perceived colour. Physically it is a dark, low-lightness orange or yellow, which is why it appears only in context with brighter surroundings.