HCHTML Color

Shades of brown

Brown is dark orange. There is no brown in the spectrum, only orange and red hues at low lightness, which is why Tailwind has no brown scale and builds browns from amber and stone.

brown · #A52A2A

11 brown color names

Every CSS named color in the brown family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

wheat#f5deb3rgb(245 222 179)oklch(0.909 0.061 83)burlywood#deb887rgb(222 184 135)oklch(0.805 0.078 73.4)tan#d2b48crgb(210 180 140)oklch(0.786 0.064 74.6)sandybrown#f4a460rgb(244 164 96)oklch(0.784 0.127 59.7)rosybrown#bc8f8frgb(188 143 143)oklch(0.693 0.055 18.6)peru#cd853frgb(205 133 63)oklch(0.678 0.123 62.2)chocolate#d2691ergb(210 105 30)oklch(0.634 0.155 50.3)sienna#a0522drgb(160 82 45)oklch(0.526 0.115 44.6)brown#a52a2argb(165 42 42)oklch(0.481 0.16 25.6)saddlebrown#8b4513rgb(139 69 19)oklch(0.471 0.112 50.8)maroon#800000rgb(128 0 0)oklch(0.377 0.155 29.2)

Tailwind brown scales

The Tailwind v4 default palette families closest to brown, 50 to 950.

Using brown in a UI

Browns make warm, earthy neutrals. Generate a scale from a brown in OKLCH and you get a natural-looking set of surfaces, borders and text colors for editorial or craft brands.

brown-colors.css
:root {
  --wheat: oklch(0.909 0.061 83); /* #f5deb3 */
  --burlywood: oklch(0.805 0.078 73.4); /* #deb887 */
  --tan: oklch(0.786 0.064 74.6); /* #d2b48c */
  --sandybrown: oklch(0.784 0.127 59.7); /* #f4a460 */
  --rosybrown: oklch(0.693 0.055 18.6); /* #bc8f8f */
  --peru: oklch(0.678 0.123 62.2); /* #cd853f */
  --chocolate: oklch(0.634 0.155 50.3); /* #d2691e */
  --sienna: oklch(0.526 0.115 44.6); /* #a0522d */
  --brown: oklch(0.481 0.16 25.6); /* #a52a2a */
  --saddlebrown: oklch(0.471 0.112 50.8); /* #8b4513 */
  --maroon: oklch(0.377 0.155 29.2); /* #800000 */
}
Generate a brown scaleBuild a palette

Frequently asked questions

What is the hex code for brown?
The CSS keyword brown is #A52A2A, which is rgb(165 42 42) or oklch(0.481 0.16 25.6). Tailwind's amber-500 is #FE9A00, a softer brown that many design systems use instead.
How many shades of brown have CSS color names?
This page lists 11 CSS named colors in the brown family, from wheat (#F5DEB3) at the light end to maroon (#800000) at the dark end. Every one can be used directly in CSS by name.
What colors go well with brown?
Brown pairs well with green, blue and white. For a guaranteed match, open any brown shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a brown color scale for my design system?
Pick a brown you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeYellowGreenTealBluePurplePinkGrayWhite