24 Shades of Brown with Hex Codes

Named Brown Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Brown Color Chart: Hex, RGB, HSL & CMYK

Every brown above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Brown Scale from Light to Dark

A 12-step lightness scale built from the core brown hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate brown design tokens.

What Brown Communicates

Brown is a dark, desaturated warm hue rather than a hue of its own, which is why it feels natural next to almost anything. It signals craft, earth, and permanence, and light tans function as warm neutrals that soften a layout the way gray never does. In CSS, the keyword `brown` is #A52A2A — noticeably redder than most people expect.

Where brown works well

• Coffee, leather, furniture, and artisanal food brands
• Warm neutral backgrounds and borders in place of pure gray
• Earth-tone palettes alongside sage, cream, and terracotta
• Wood and material references in illustration and UI

Colors that pair with brown

Copy the Brown Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --brown-espresso: #3B2F2F;
  --brown-maroon: #800000;
  --brown-taupe: #483C32;
  --brown-chocolate-brown: #7B3F00;
  --brown-walnut: #5C5248;
  --brown-coffee: #6F4E37;
  --brown-saddlebrown: #8B4513;
  --brown-brown: #A52A2A;
  --brown-chestnut: #954535;
  --brown-sienna: #A0522D;
  --brown-mahogany: #C04000;
  --brown-mocha: #967969;
  --brown-chocolate: #D2691E;
  --brown-darkgoldenrod: #B8860B;
  --brown-peru: #CD853F;
  --brown-caramel: #C68E17;
  --brown-rosybrown: #BC8F8F;
  --brown-camel: #C19A6B;
  --brown-goldenrod: #DAA520;
  --brown-sandybrown: #F4A460;
  --brown-tan: #D2B48C;
  --brown-burlywood: #DEB887;
  --brown-wheat: #F5DEB3;
  --brown-navajowhite: #FFDEAD;
}

Brown Color Questions