
Figma color wheel
Want to find the perfect complementary or analogous colors to match brown?
Skip to main content
Everything you need to know about brown to inspire your next design.
Brown is a rich, earthy color, bringing forth the comforting qualities of a cozy cup of cocoa. It sits on the warm side of the color wheel, exuding a sense of grounding and security.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Teddy Bear
Into Nature
Cozy Campfire
Brown is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use brown in your designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same rich spectrum as brown, consider:
To complement brown, consider pairing it with:
Other colors worth considering include charcoal for a modern touch, green shades for an earthy palette, and cheerful yellow for a vibrant pop of color.
While brown is earthy, it may clash with:
Brown symbolizes stability, strength, and grounding, evoking images of fertile soil and enduring nature. It represents simplicity, reliability, and tradition, like well-worn leather or a cozy cabin.
In color psychology, brown conveys feelings of security, comfort, and warmth. However, darker shades can sometimes evoke feelings of loneliness or melancholy.
In UI/UX design, brown is an excellent choice to create a sense of trust and comfort, making it ideal for base tones. It also lends sophistication for premium experiences. Use brown strategically to enhance user experience without making the design feel too heavy.
Brown pigments, likely derived from natural clays like umber, have been used since prehistoric times. Cave paintings, some as old as 40,000, feature brown pigments depicting animals and human figures.
Brown’s earthy tones have held various symbolic meanings throughout history. In ancient Egypt, brown was often used in tomb paintings to depict skin tones. In ancient Rome, however, brown was often associated with the lower classes and considered less desirable than the vibrant colors favored by the elite.
Today, brown is associated with comfort, stability, and nature, making it a popular choice in everything from fashion to interior design.
Contrast 6.42
#895129
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Contrast 3.27
#895129
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #895129, known as brown, has RGB values of R:137 G:81, B:41 and CMYK values of C:0, M:41, Y:70, K:46.
| VALUE | CSS | |
|---|---|---|
| HEX | 895129 | #895129 |
| RGB DECIMAL | 137, 81, 41 | RGB(137,81,41) |
| RGB PERCENTAGE | 53.7, 31.8, 16.1 | RGB(53.7%,31.8%,16.1%) |
| CMYK | 0, 41, 70, 46 | |
| HSL | 25°, 53.9, 34.9 | HSL(25,53.9%,34.9%) |
| HSV (OR HSB) | 25°, 70.1, 53.7 | |
| WEB SAFE | 996633 | #996633 |
| CIE-LAB | 40.187, 19.713, 32.851 | |
| XYZ | 13.66, 11.364, 3.572 | |
| xyY | 0.478, 0.397, 11.364 | |
| CIE-LCH | 40.187, 38.312, 59.033 | |
| CIE-LUV | 40.187, 43.146, 29.571 | |
| HUNTER-LAB | 33.711, 13.333, 17.316 | |
| BINARY | 10001001, 01010001, 00101001 | |
| iOS - SwiftUI | Color(red: 0.537, green: 0.318, blue: 0.161) | |
| iOS - UIKit | UIColor(red: 0.537, green: 0.318, blue: 0.161, alpha: 1) | |
| Android - Compose | Color(0xFF895129) |

Want to find the perfect complementary or analogous colors to match brown?
Discover the cool and muted color of blue-gray.

Discover the warmth and energy of burnt orange.