Shades of brown

Browns run from cornsilk and wheat (#f5deb3) to saddle brown (#8b4513) and maroon. The list gives 17 named browns and tans with hex codes, and any of them becomes a 50–950 scale with one click.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#fff4efWhite1.1 FailInk16.8 AAA
100#ffe5d7White1.2 FailInk15.0 AAA
200#ffcbadWhite1.5 FailInk12.4 AAA
300#eead87White1.9 FailInk9.4 AAA
400#d48f66White2.7 FailInk6.8 AA
500#ba7145White3.8 AA largeInk4.8 AA
600#9f5b30White5.2 AAInk3.5 AA large
700#82461eWhite7.4 AAAInk2.5 Fail
800#67320cWhite10.3 AAAInk1.8 Fail
900#4f2100White13.5 AAAInk1.3 Fail
950#361400White16.7 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-brown-50: #fff4ef;
  --color-brown-100: #ffe5d7;
  --color-brown-200: #ffcbad;
  --color-brown-300: #eead87;
  --color-brown-400: #d48f66;
  --color-brown-500: #ba7145;
  --color-brown-600: #9f5b30;
  --color-brown-700: #82461e;
  --color-brown-800: #67320c;
  --color-brown-900: #4f2100;
  --color-brown-950: #361400;
  --color-accent-1: #ffd4bc;
  --color-accent-2: #e7996b;
  --color-accent-3: #843f0a;
  --color-accent-4: #4c1f00;
}

At a glance

Cornsilk (cornsilk): #fff8dc · white text 1.06:1 (Fail), near-black text 16.98:1 (AAA); Source: w3.org, checked 2026-11
Blanched almond (blanchedalmond): #ffebcd · white text 1.16:1 (Fail), near-black text 15.52:1 (AAA); Source: w3.org, checked 2026-11
Bisque (bisque): #ffe4c4 · white text 1.22:1 (Fail), near-black text 14.77:1 (AAA); Source: w3.org, checked 2026-11
Navajo white (navajowhite): #ffdead · white text 1.28:1 (Fail), near-black text 14.04:1 (AAA); Source: w3.org, checked 2026-11
Wheat (wheat): #f5deb3 · white text 1.31:1 (Fail), near-black text 13.77:1 (AAA); Source: w3.org, checked 2026-11
Burlywood (burlywood): #deb887 · white text 1.85:1 (Fail), near-black text 9.74:1 (AAA); Source: w3.org, checked 2026-11
Tan (tan): #d2b48c · white text 1.97:1 (Fail), near-black text 9.17:1 (AAA); Source: w3.org, checked 2026-11
Rosy brown (rosybrown): #bc8f8f · white text 2.81:1 (Fail), near-black text 6.43:1 (AA); Source: w3.org, checked 2026-11
Sandy brown (sandybrown): #f4a460 · white text 2.03:1 (Fail), near-black text 8.89:1 (AAA); Source: w3.org, checked 2026-11
Goldenrod (goldenrod): #daa520 · white text 2.23:1 (Fail), near-black text 8.08:1 (AAA); Source: w3.org, checked 2026-11
Peru (peru): #cd853f · white text 2.99:1 (Fail), near-black text 6.05:1 (AA); Source: w3.org, checked 2026-11
Dark goldenrod (darkgoldenrod): #b8860b · white text 3.25:1 (AA large), near-black text 5.56:1 (AA); Source: w3.org, checked 2026-11
Chocolate (chocolate): #d2691e · white text 3.63:1 (AA large), near-black text 4.98:1 (AA); Source: w3.org, checked 2026-11
Sienna (sienna): #a0522d · white text 5.61:1 (AA), near-black text 3.22:1 (AA large); Source: w3.org, checked 2026-11
Saddle brown (saddlebrown): #8b4513 · white text 7.09:1 (AAA), near-black text 2.54:1 (Fail); Source: w3.org, checked 2026-11
Brown (brown): #a52a2a · white text 7.08:1 (AAA), near-black text 2.55:1 (Fail); Source: w3.org, checked 2026-11
Maroon (maroon): #800000 · white text 10.94:1 (AAA), near-black text 1.65:1 (Fail); Source: w3.org, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of brown: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Which shades of brown can carry text

White body text passes WCAG AA (4.5:1) on 4 of the 17: sienna (#a0522d), saddle brown (#8b4513), brown (#a52a2a) and maroon (#800000). Use these for buttons, banners and anything with white type on it.

Near-black text (#161616) passes on 13: cornsilk (#fff8dc), blanched almond (#ffebcd), bisque (#ffe4c4), Navajo white (#ffdead), wheat (#f5deb3), burlywood (#deb887), tan (#d2b48c), rosy brown (#bc8f8f), sandy brown (#f4a460), goldenrod (#daa520), peru (#cd853f), dark goldenrod (#b8860b) and chocolate (#d2691e).

Brown is dark orange

Brown has no hue of its own. Saddle brown, sienna and chocolate sit at 45–51° in OKLCH, the same angle as orange, only darker and less saturated. That's why an orange base pushed to the 800–950 end of the scale reads as brown.

Tans and beiges such as burlywood, tan and wheat are the same idea at high lightness, which is why they pair so easily with deeper browns.

Questions

What are 10 different shades of brown?

Ten named browns from light to dark: wheat, burlywood, tan, rosy brown, sandy brown, peru, chocolate, sienna, saddle brown and brown. Hex codes for all of them are listed above.

What are the names of some shades of brown?

CSS names include tan, peru, sienna, saddle brown, chocolate, burlywood, rosy brown and sandy brown, plus pale browns such as wheat, bisque and cornsilk.