Shades of Brown | Colormapped

Shades of Brown color ramp

These swatches are generated from one base hue using fixed HSL lightness steps. They are computed references, not official color names.

#FAEBEB HSL lightness 95%

#EFC2C2 HSL lightness 85%

#E59999 HSL lightness 75%

#DB7171 HSL lightness 65%

#D04848 HSL lightness 55%

#B72F2F HSL lightness 45%

#8E2424 HSL lightness 35%

#661A1A HSL lightness 25%

#3D1010 HSL lightness 15%

Base reference: #A52A2A. Use the Tints and Shades Generator when you need a ramp based on a specific project color.

Common CSS named brown and earth colors

Brown is a broad warm-neutral family, so these CSS names include tan, sand, orange-brown, reddish-brown, and deep brown directions.

ColorCSS keywordHEX

Wheat wheat #F5DEB3

Burly Wood burlywood #DEB887

Tan tan #D2B48C

Rosy Brown rosybrown #BC8F8F

Sandy Brown sandybrown #F4A460

Peru peru #CD853F

Chocolate chocolate #D2691E

Sienna sienna #A0522D

Brown brown #A52A2A

Saddle Brown saddlebrown #8B4513

Named-color values above use the standardized CSS sRGB keywords documented by MDN. The list is curated for this color family; it is not a perceptually uniform scale.

Brown is a broad warm-neutral family rather than one narrow hue. The computed ramp above starts from a standard brown reference and changes HSL lightness to show how a consistent base can move from light earthy tones toward deep brown.

Real-world browns often shift more toward orange, red, yellow, or gray than a single computed ramp can show. Use the ramp for tonal comparison, then adjust hue and saturation when you need wood, soil, leather, coffee, or other specific brown directions.

Useful next steps

Try a specific color in the Tints and Shades Generator, or browse other shade families.