List of Brown Shades with HEX, RGB & HSL Color Codes

Explore popular brown shades, color names and their HEX, RGB and HSL values.

#A52A2A

Brown

HEX #A52A2A

RGB 165,42,42

HSL 0,59%,41%

#5C4033

Dark Brown

HEX #5C4033

RGB 92,64,51

HSL 18,29%,28%

#7B3F00

Chocolate

HEX #7B3F00

RGB 123,63,0

HSL 31,100%,24%

#4B3621

Coffee Brown

HEX #4B3621

RGB 75,54,33

HSL 30,38%,21%

#D2691E

Cocoa Brown

HEX #D2691E

RGB 210,105,30

HSL 25,75%,47%

#A0522D

Sienna

HEX #A0522D

RGB 160,82,45

HSL 19,56%,40%

#8A3324

Burnt Umber

HEX #8A3324

RGB 138,51,36

HSL 8,59%,34%

#826644

Raw Umber

HEX #826644

RGB 130,102,68

HSL 32,31%,39%

#704214

Sepia

HEX #704214

RGB 112,66,20

HSL 30,70%,26%

#D2B48C

Tan Brown

HEX #D2B48C

RGB 210,180,140

HSL 34,44%,69%

#8B5A2B

Wood Brown

HEX #8B5A2B

RGB 139,90,43

HSL 28,54%,36%

#7A5230

Earth Brown

HEX #7A5230

RGB 122,82,48

HSL 28,43%,33%

#5D3A1A

Walnut Brown

HEX #5D3A1A

RGB 93,58,26

HSL 27,56%,23%

#B38B6D

Hazelnut

HEX #B38B6D

RGB 179,139,109

HSL 25,31%,56%

#C68E17

Caramel

HEX #C68E17

RGB 198,142,23

HSL 41,80%,43%

#B87333

Copper Brown

HEX #B87333

RGB 184,115,51

HSL 29,56%,46%

#CD7F32

Bronze

HEX #CD7F32

RGB 205,127,50

HSL 30,61%,50%

#954535

Chestnut

HEX #954535

RGB 149,69,53

HSL 10,47%,40%

#420D09

Mahogany

HEX #420D09

RGB 66,13,9

HSL 5,77%,15%

#8B4000

Rust Brown

HEX #8B4000

RGB 139,64,0

HSL 28,100%,27%

#B66A50

Clay Brown

HEX #B66A50

RGB 182,106,80

HSL 15,41%,51%

#3B2F2F

Mocha

HEX #3B2F2F

RGB 59,47,47

HSL 0,11%,21%

#A67B5B

Acorn Brown

HEX #A67B5B

RGB 166,123,91

HSL 27,30%,50%

#996515

Golden Brown

HEX #996515

RGB 153,101,21

HSL 37,76%,34%

#F2D2A9

Biscuit

HEX #F2D2A9

RGB 242,210,169

HSL 33,74%,81%

#C19A6B

Camel Brown

HEX #C19A6B

RGB 193,154,107

HSL 32,42%,59%

#C2B280

Sand Brown

HEX #C2B280

RGB 194,178,128

HSL 45,35%,63%

#A67B5B

Light Brown

HEX #A67B5B

RGB 166,123,91

HSL 27,30%,50%

#3C2415

Dark Chocolate

HEX #3C2415

RGB 60,36,21

HSL 25,47%,16%

#4E2A1E

Deep Brown

HEX #4E2A1E

RGB 78,42,30

HSL 14,44%,21%

#704214

Sepia Brown

HEX #704214

RGB 112,66,20

HSL 30,70%,26%

#AF6E4D

Brown Sugar

HEX #AF6E4D

RGB 175,110,77

HSL 21,40%,49%

#7B4F2C

Earthy Brown

HEX #7B4F2C

RGB 123,79,44

HSL 26,46%,33%

#773F1A

Walnut

HEX #773F1A

RGB 119,63,26

HSL 25,64%,28%

#654321

Woodland Brown

HEX #654321

RGB 101,67,33

HSL 30,51%,26%

#4B3621

Forest Brown

HEX #4B3621

RGB 75,54,33

HSL 30,38%,21%

#8B3A3A

Brick Brown

HEX #8B3A3A

RGB 139,58,58

HSL 0,41%,39%

#362C2A

Coffee Bean

HEX #362C2A

RGB 54,44,42

HSL 12,12%,19%

#5C4033

Dark Wood

HEX #5C4033

RGB 92,64,51

HSL 18,29%,28%

#654321

Pure Brown

HEX #654321

RGB 101,67,33

HSL 30,51%,26%

Brown Shades Color Collection

Brown shades are widely used in web design, branding, graphic design, interior design and digital products. From light tan to deep chocolate, coffee, cocoa and walnut tones, different brown shades help create warm, natural and elegant visual experiences.

This brown shades collection includes popular brown color names along with their HEX, RGB and HSL color codes. Designers, developers and creative professionals can easily copy color values and use them in websites, mobile apps, user interfaces, branding materials and design projects.

Popular Brown Color Shades

Brown
Chocolate
Coffee Brown
Cocoa Brown
Tan
Caramel
Sienna
Sepia
Walnut
Mahogany

What Are Brown Shades?

Brown shades are variations of the brown color family that contain subtle red, yellow, orange or dark earthy undertones. While they may appear similar at first glance, each shade creates a unique visual effect. Some brown shades feel warm and natural, while others provide a rich, earthy or luxurious appearance.

How to Use Brown Shades in Design

Create warm and natural website layouts.
Design earthy and elegant user interfaces and dashboards.
Build strong and organic branding and logo designs.
Create luxury packaging and premium product designs.
Improve contrast when paired with lighter colors.
Use as a foundation for natural and earthy color palettes.

HEX, RGB and HSL Color Codes

Each brown shade on this page includes HEX, RGB and HSL values. HEX color codes are commonly used in CSS and web development, RGB values are useful for digital screens and graphic software, while HSL values make it easier to adjust brightness and create custom color variations.

Why Use Different Brown Shades?

Create depth and visual hierarchy.
Add warmth and elegance to designs.
Improve readability and contrast.
Match specific branding requirements.
Create natural, rustic and premium aesthetics.

Perfect for Designers and Developers

Whether you are designing a website, mobile application, logo, presentation, product packaging or marketing campaign, these brown shades provide versatile color options that work well with nearly every design style and color palette.

Copy Brown Color Codes Instantly

Browse the brown shades listed above and copy HEX, RGB or HSL values with a single click. This makes it easy to use your favorite brown colors directly in CSS, design software and development projects.

Frequently Asked Questions

Common questions about brown shades, color codes and their use in design and development.

Brown shades are variations of brown that include subtle red, yellow, orange or earthy undertones. Popular examples include Chocolate, Coffee, Sienna, Walnut and Caramel.

The HEX code for a basic brown tone is #A52A2A. It is widely used in web design, graphic design and digital interfaces.

Brown is a general earth tone color, while chocolate is a deeper and richer brown shade that feels more warm, dark and luxurious.

HEX, RGB and HSL color codes help designers and developers accurately use colors across websites, mobile applications, design software and digital products.

Popular choices include Chocolate, Coffee Brown, Caramel and Sienna because they create a warm, natural and elegant modern look.

Yes. You can easily copy HEX, RGB and HSL values from the color cards and use them directly in CSS, design tools, branding projects and software development.