Brown Color

About brown

#A52A2A is the value of the CSS named color brown. It is noticeably red — closer to a brick or chestnut than to chocolate — because the name was inherited from the old X11 color list.

Brown has no single agreed digital value. Many references use #964B00 for a neutral mid brown, and CSS itself offers saddlebrown (#8B4513), sienna (#A0522D) and chocolate (#D2691E) for other browns. This page uses the CSS value as its canonical code and lists the common alternatives below.

#A52A2A is the value of the CSS named color brown, defined in the CSS Color specification and identical in every browser.

Other colors called brown

• Neutral brown #964B00A commonly used, less red mid brown.Copy
• Saddle brown (CSS) #8B4513A dark, leathery CSS brown.Copy

Brown shades and tints

Shades mix brown with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with brown

Color harmonies based on the hue of #A52A2A: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Brown contrast and readability

On a brown background, white text reads best (7.08:1). Here is how brown works as a text color:

Browns are dark enough for white text and readable as text on light backgrounds. Pair them with cream, beige or muted greens for natural, earthy palettes.

Using brown in CSS and HTML

:root {
  --color-brown: #A52A2A;
}

.highlight {
  background-color: var(--color-brown);
}

.banner {
  background-color: brown;
  color: #ffffff;
}

.label {
  color: #A52A2A;
  border: 2px solid rgb(165, 42, 42);
}

<p style="background-color: #A52A2A; color: #FFFFFF;">
  Brown background
</p>