Shades of Brown: Color Names & Hex Codes
There are 8 CSS named colors in the brown range, from the lightest, Burlywood, to the darkest, Saddle Brown. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.
Brown Color Chart
Ordered from lightest to darkest by relative luminance. Click a name for its full color page.
Light, Mid-tone and Dark Shades of Brown
Light shades of brown
Pale enough to work as backgrounds. Black text has the higher contrast on all 3 of them. Burlywood, Tan and Sandy Brown.
Mid-tone shades of brown
Mid-tones for accents, buttons and illustrations. Check the table below before choosing a text color. Black text has the higher contrast on all 2 of them. Peru and Chocolate.
Dark shades of brown
Deep tones for headers, buttons and bold brand color. White text has the higher contrast on all 3 of them. Sienna, Brown and Saddle Brown.
Brown Hex Codes and Contrast
Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.
| Color | HEX | RGB | HSL | On black | On white | Best text |
|---|---|---|---|---|---|---|
#DEB887 | rgb(222, 184, 135) | hsl(34, 57%, 70%) | 11.31:1 | 1.86:1 | Black | |
#D2B48C | rgb(210, 180, 140) | hsl(34, 44%, 69%) | 10.65:1 | 1.97:1 | Black | |
#F4A460 | rgb(244, 164, 96) | hsl(28, 87%, 67%) | 10.33:1 | 2.03:1 | Black | |
#CD853F | rgb(205, 133, 63) | hsl(30, 59%, 53%) | 7.02:1 | 2.99:1 | Black | |
#D2691E | rgb(210, 105, 30) | hsl(25, 75%, 47%) | 5.78:1 | 3.63:1 | Black | |
#A0522D | rgb(160, 82, 45) | hsl(19, 56%, 40%) | 3.74:1 | 5.62:1 | White | |
#A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | 2.96:1 | 7.08:1 | White | |
#8B4513 | rgb(139, 69, 19) | hsl(25, 76%, 31%) | 2.96:1 | 7.1:1 | White |
Shades of Brown FAQ
What are the shades of brown in CSS?
CSS Color 4 does not group its named colors into families, but 8 of them fall in the brown range. From lightest to darkest: Burlywood (#DEB887), Tan (#D2B48C), Sandy Brown (#F4A460), Peru (#CD853F), Chocolate (#D2691E), Sienna (#A0522D), Brown (#A52A2A) and Saddle Brown (#8B4513).
What is the hex code for brown?
The CSS named color brown is #A52A2A, which is RGB(165, 42, 42). The other shades on this page each have their own code.
Which shade of brown can I use for text on a white background?
Sienna, Brown and Saddle Brown are the only ones of these shades with at least 4.5:1 contrast on white, the WCAG AA minimum for body text. Saddle Brown reaches 7.1:1.
Are chestnut and taupe CSS colors?
No. Chestnut and taupe are common names, not CSS named colors, so neither has a standard hex code. Beige (#F5F5DC) is a CSS color, unlike either of them. Sienna (#A0522D) is a reddish brown near chestnut.
Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).