22 named brown shades with hex codes — click any swatch to copy.
Enter any hex code to find the nearest named brown shade.
Brown is the color of earth, wood, and warmth. It's one of the most grounding and reliable colors in design. Light tans and beiges feel clean and approachable; mid-range caramels and chestnuts evoke coziness and comfort; dark espresso and walnut browns add sophistication to any palette.
Cornsilk
#FFF8DC
Blanched Almond
#FFEBCD
Bisque
#FFE4C4
Navajo White
#FFDEAD
Wheat
#F5DEB3
Tan
#D2B48C
Burlywood
#DEB887
Sandy Brown
#F4A460
Caramel
#C68642
Khaki
#C3B091
Peru
#CD853F
Burnt Sienna
#E97451
Chocolate
#D2691E
Sienna
#A0522D
Chestnut
#954535
Brown
#A52A2A
Mahogany
#C04000
Saddle Brown
#8B4513
Coffee
#6F4E37
Dark Brown
#654321
Walnut
#773F1A
Espresso
#3B1A08
Pale brown shades make excellent backgrounds, hover states, and subtle accents. They keep designs airy without losing the hue's personality.
The middle of the brown spectrum is where most UI elements live — buttons, icons, links, and borders. These shades are vivid enough to pop without overwhelming.
Deep brown shades work for text on light backgrounds, dark mode surfaces, and dramatic hero sections. They're rich and authoritative.
Pick one brown shade as your primary, one light variant for backgrounds, and one dark variant for depth. Add a neutral gray for balance.