20 Different Shades of Brown (+ HEX codes)
Explore all shades of brown, from lighter to darker shades. See HEX codes, shade names, and brown color palettes. Click any shade to copy its HEX code.
Brown is orange or red with the lightness turned down, which is why it feels like wood, coffee and leather rather than like a colour on a wheel.
It anchors warm palettes and almost never competes. Keep a clear gap in lightness between the brown you use for text and the one behind it.
- serenade#fff5eb
- karry#ffe8d1
- frangipani#ffdbb7
- peach orange#ffce9d
- macaroni and cheese#ffc184
- koromiko#ffb46a
- texas rose#ffa750
- neon carrot#ff9b36
- west side#ff8e1c
- flush orange#ff8103
- mango tango#e87400
- tenn#ce6700
- rose of sharon#b45a00
- brown#9b4d00
- cinnamon#814000
- nutmeg wood finish#673400
- indian tan#4d2700
- cola#341a00
- nero#1a0d00
- black#000000
Brown: HEX & RGB Codes
brown has the following primary color codes:
HEX: #fff5eb
RGB: (255, 245, 235).
Explore a wide range of brown shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!
Explore tints of brown
Serenade
#fff5eb
Serenade
#fff5eb
Seashell Peach
#fff7f0
Seashell Peach
#fff7f0
Bridal Heath
#fffaf5
Bridal Heath
#fffaf5
Bridal Heath
#fffaf5
Soapstone
#fffcfa
Soapstone
#fffcfa
White
#ffffff
Explore shades of brown
Clinker
#341f09
Brown Derby
#4c3015
Pickled Bean
#654525
Potters Clay
#815e3b
Leather
#9b7855
Sandal
#b49474
Sorrell Brown
#ccb094
Stark White
#e5d1bd
brown in HEX, RGB, HSL and CMYK
| HEX | #964B00 | |
|---|---|---|
| RGB | rgb(150, 75, 0) | |
| HSL | hsl(30, 100%, 29%) | |
| CMYK | cmyk(0%, 50%, 100%, 41%) |
Tints and shades of brown
Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.
Tints (lighter)
#cd6600
#ff8307
#ff9f40
#ffbc79
#ffd8b2
#fff5eb
Shades (darker)
#7f3f00
#693500
#542a00
#3f1f00
#2a1500
#140a00
Colours that work with brown
Complementary
#964B00 #004a94
Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.
Analogous
#940000 #964B00 #949400
Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.
Triadic
#964B00 #00944a #4a0094
Three colours evenly spaced. Lively and balanced; let one dominate.
Text on brown
Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker
brown shade chart
Right-click to save the chart, or copy the individual codes above.