tan
CSS keyword
On white 1.97:1 · Fail
On black 10.65:1 · AAA
Brown & tan Colors
Names, HEX, RGB & Contrast
104 named brown & tan colors, grouped by lightness. Click any value to copy it.
Mid-tone
70 colors
goldenrod
CSS keyword
On white 2.24:1 · Fail
On black 9.38:1 · AAA
chocolate
CSS keyword
On white 3.63:1 · AA Large
On black 5.78:1 · AA
sienna
CSS keyword
On white 5.62:1 · AA
On black 3.74:1 · AA Large
darkgoldenrod
CSS keyword
On white 3.25:1 · AA Large
On black 6.45:1 · AA
putty
On white 2.19:1 · Fail
On black 9.61:1 · AAA
toupe
On white 2.18:1 · Fail
On black 9.63:1 · AAA
mushroom
On white 2.52:1 · Fail
On black 8.33:1 · AAA
greyish
On white 2.5:1 · Fail
On black 8.41:1 · AAA
sandstone
On white 2.15:1 · Fail
On black 9.79:1 · AAA
bland
On white 2.39:1 · Fail
On black 8.8:1 · AAA
taupe
On white 2.46:1 · Fail
On black 8.55:1 · AAA
stone
On white 2.47:1 · Fail
On black 8.51:1 · AAA
dust
On white 2.74:1 · Fail
On black 7.67:1 · AAA
pale brown
On white 2.94:1 · Fail
On black 7.14:1 · AAA
warm grey
On white 3.34:1 · AA Large
On black 6.28:1 · AA
dark beige
On white 2.96:1 · Fail
On black 7.1:1 · AAA
clay
On white 4.06:1 · AA Large
On black 5.17:1 · AA
dark sand
On white 3.12:1 · AA Large
On black 6.74:1 · AA
yellow orange
On white 1.85:1 · Fail
On black 11.35:1 · AAA
light brown
On white 3.48:1 · AA Large
On black 6.03:1 · AA
dark tan
On white 3.26:1 · AA Large
On black 6.44:1 · AA
golden
On white 1.7:1 · Fail
On black 12.34:1 · AAA
tan brown
On white 3.61:1 · AA Large
On black 5.82:1 · AA
puce
On white 3.68:1 · AA Large
On black 5.71:1 · AA
brown grey
On white 3.73:1 · AA Large
On black 5.63:1 · AA
brownish
On white 4.43:1 · AA Large
On black 4.74:1 · AA
coffee
On white 3.58:1 · AA Large
On black 5.87:1 · AA
dark khaki
On white 3.25:1 · AA Large
On black 6.45:1 · AA
clay brown
On white 3.95:1 · AA Large
On black 5.32:1 · AA
mocha
On white 4.08:1 · AA Large
On black 5.14:1 · AA
brownish orange
On white 3.39:1 · AA Large
On black 6.2:1 · AA
brownish grey
On white 4.36:1 · AA Large
On black 4.82:1 · AA
pumpkin
On white 3.07:1 · AA Large
On black 6.84:1 · AA
leather
On white 3.96:1 · AA Large
On black 5.3:1 · AA
earth
On white 4.7:1 · AA
On black 4.47:1 · AA Large
burnt yellow
On white 2.17:1 · Fail
On black 9.66:1 · AAA
deep orange
On white 4.11:1 · AA Large
On black 5.11:1 · AA
copper
On white 4.37:1 · AA Large
On black 4.8:1 · AA
rusty orange
On white 4.18:1 · AA Large
On black 5.03:1 · AA
dull brown
On white 4.81:1 · AA
On black 4.36:1 · AA Large
grey brown
On white 4.83:1 · AA
On black 4.34:1 · AA Large
yellow ochre
On white 2.51:1 · Fail
On black 8.36:1 · AAA
dirt
On white 4.78:1 · AA
On black 4.4:1 · AA Large
dirty orange
On white 3.47:1 · AA Large
On black 6.05:1 · AA
dark taupe
On white 5.26:1 · AA
On black 3.99:1 · AA Large
browny orange
On white 3.74:1 · AA Large
On black 5.62:1 · AA
rust orange
On white 4.52:1 · AA
On black 4.65:1 · AA
ocher
On white 2.66:1 · Fail
On black 7.91:1 · AAA
brick orange
On white 4.94:1 · AA
On black 4.25:1 · AA Large
ocre
On white 2.57:1 · Fail
On black 8.16:1 · AAA
cocoa
On white 5.61:1 · AA
On black 3.75:1 · AA Large
greyish brown
On white 5.25:1 · AA
On black 4:1 · AA Large
dark orange
On white 4.59:1 · AA
On black 4.58:1 · AA
dark gold
On white 2.91:1 · Fail
On black 7.21:1 · AAA
ochre
On white 2.91:1 · Fail
On black 7.21:1 · AAA
sepia
On white 5.29:1 · AA
On black 3.97:1 · AA Large
burnt orange
On white 4.85:1 · AA
On black 4.33:1 · AA Large
burnt sienna
On white 5.33:1 · AA
On black 3.94:1 · AA Large
orange brown
On white 4.19:1 · AA Large
On black 5.01:1 · AA
dirt brown
On white 5.4:1 · AA
On black 3.89:1 · AA Large
brown orange
On white 4.13:1 · AA Large
On black 5.08:1 · AA
baby shit brown
On white 3.1:1 · AA Large
On black 6.77:1 · AA
burnt siena
On white 4.97:1 · AA
On black 4.22:1 · AA Large
yellowy brown
On white 3.23:1 · AA Large
On black 6.5:1 · AA
caramel
On white 4.12:1 · AA Large
On black 5.1:1 · AA
yellow brown
On white 2.9:1 · Fail
On black 7.25:1 · AAA
orangish brown
On white 4.63:1 · AA
On black 4.53:1 · AA
orangey brown
On white 4.62:1 · AA
On black 4.54:1 · AA
golden brown
On white 3.7:1 · AA Large
On black 5.68:1 · AA
Dark
34 colors
saddlebrown
CSS keyword
On white 7.1:1 · AAA
On black 2.96:1 · Fail
cinnamon
On white 5.42:1 · AA
On black 3.88:1 · AA Large
umber
On white 4.45:1 · AA Large
On black 4.72:1 · AA
rust
On white 6.33:1 · AA
On black 3.32:1 · AA Large
raw umber
On white 4.94:1 · AA
On black 4.25:1 · AA Large
mustard brown
On white 3.66:1 · AA Large
On black 5.74:1 · AA
burnt umber
On white 6.26:1 · AA
On black 3.35:1 · AA Large
dark mustard
On white 3.36:1 · AA Large
On black 6.25:1 · AA
bronze
On white 3.89:1 · AA Large
On black 5.4:1 · AA
hazel
On white 4.42:1 · AA Large
On black 4.75:1 · AA
russet
On white 6.77:1 · AA
On black 3.1:1 · AA Large
diarrhea
On white 3.67:1 · AA Large
On black 5.72:1 · AA
milk chocolate
On white 6.97:1 · AA
On black 3.01:1 · AA Large
yellowish brown
On white 4.06:1 · AA Large
On black 5.18:1 · AA
auburn
On white 7.51:1 · AAA
On black 2.8:1 · Fail
raw sienna
On white 5.1:1 · AA
On black 4.12:1 · AA Large
puke brown
On white 4.29:1 · AA Large
On black 4.9:1 · AA
warm brown
On white 6.2:1 · AA
On black 3.39:1 · AA Large
brown red
On white 8.17:1 · AAA
On black 2.57:1 · Fail
poo
On white 4.54:1 · AA
On black 4.62:1 · AA
medium brown
On white 6.8:1 · AA
On black 3.09:1 · AA Large
rust brown
On white 8.27:1 · AAA
On black 2.54:1 · Fail
muddy brown
On white 5.21:1 · AA
On black 4.03:1 · AA Large
poo brown
On white 5.7:1 · AA
On black 3.68:1 · AA Large
reddish brown
On white 9.32:1 · AAA
On black 2.25:1 · Fail
mud
On white 6.42:1 · AA
On black 3.27:1 · AA Large
shit brown
On white 6.48:1 · AA
On black 3.24:1 · AA Large
shit
On white 5.93:1 · AA
On black 3.54:1 · AA Large
poop
On white 5.99:1 · AA
On black 3.5:1 · AA Large
poop brown
On white 6.45:1 · AA
On black 3.26:1 · AA Large
chestnut
On white 10.26:1 · AAA
On black 2.05:1 · Fail
mud brown
On white 8.82:1 · AAA
On black 2.38:1 · Fail
chocolate brown
On white 15.4:1 · AAA
On black 1.36:1 · Fail
dark brown
On white 15.99:1 · AAA
On black 1.31:1 · Fail
Copy the whole palette
Every brown & tan color on this page, ready to paste into your project.
CSS
:root {
--tan: #d2b48c;
--goldenrod: #daa520;
--chocolate: #d2691e;
--sienna: #a0522d;
--darkgoldenrod: #b8860b;
--saddlebrown: #8b4513;
--putty: #beae8a;
--toupe: #c7ac7d;
--mushroom: #ba9e88;
--greyish: #a8a495;
--sandstone: #c9ae74;
--bland: #afa88b;
--taupe: #b9a281;
--stone: #ada587;
--dust: #b2996e;
--pale-brown: #b1916e;
--warm-grey: #978a84;
--dark-beige: #ac9362;
--clay: #b66a50;
--dark-sand: #a88f59;
--yellow-orange: #fcb001;
--light-brown: #ad8150;
--dark-tan: #af884a;
--golden: #f5bf03;
--tan-brown: #ab7e4c;
--puce: #a57e52;
--brown-grey: #8d8468;
--brownish: #9c6d57;
--coffee: #a6814c;
--dark-khaki: #9b8f55;
--clay-brown: #b2713d;
--mocha: #9d7651;
--brownish-orange: #cb7723;
--brownish-grey: #86775f;
--pumpkin: #e17701;
--leather: #ac7434;
--earth: #a2653e;
--burnt-yellow: #d5ab09;
--deep-orange: #dc4d01;
--copper: #b66325;
--rusty-orange: #cd5909;
--dull-brown: #876e4b;
--grey-brown: #7f7053;
--yellow-ochre: #cb9d06;
--dirt: #8a6e45;
--dirty-orange: #c87606;
--dark-taupe: #7f684e;
--browny-orange: #ca6b02;
--rust-orange: #c45508;
--ocher: #bf9b0c;
--brick-orange: #c14a09;
--ocre: #c69c04;
--cocoa: #875f42;
--greyish-brown: #7a6a4f;
--dark-orange: #c65102;
--dark-gold: #b59410;
--ochre: #bf9005;
--sepia: #985e2b;
--burnt-orange: #c04e01;
--burnt-sienna: #b04e0f;
--orange-brown: #be6400;
--dirt-brown: #836539;
--brown-orange: #b96902;
--baby-shit-brown: #ad900d;
--burnt-siena: #b75203;
--yellowy-brown: #ae8b0c;
--caramel: #af6f09;
--yellow-brown: #b79400;
--orangish-brown: #b25f03;
--orangey-brown: #b16002;
--golden-brown: #b27a01;
--cinnamon: #ac4f06;
--umber: #b26400;
--rust: #a83c09;
--raw-umber: #a75e09;
--mustard-brown: #ac7e04;
--burnt-umber: #a0450e;
--dark-mustard: #a88905;
--bronze: #a87900;
--hazel: #8e7618;
--russet: #a13905;
--diarrhea: #9f8303;
--milk-chocolate: #7f4e1e;
--yellowish-brown: #9b7a01;
--auburn: #9a3001;
--raw-sienna: #9a6200;
--puke-brown: #947706;
--warm-brown: #964e02;
--brown-red: #922b05;
--poo: #8f7303;
--medium-brown: #7f5112;
--rust-brown: #8b3103;
--muddy-brown: #886806;
--poo-brown: #885f01;
--reddish-brown: #7f2b0a;
--mud: #735c12;
--shit-brown: #7b5804;
--shit: #7f5f00;
--poop: #7f5e00;
--poop-brown: #7a5901;
--chestnut: #742802;
--mud-brown: #60460f;
--chocolate-brown: #411900;
--dark-brown: #341c02;
} SCSS
$tan: #d2b48c; $goldenrod: #daa520; $chocolate: #d2691e; $sienna: #a0522d; $darkgoldenrod: #b8860b; $saddlebrown: #8b4513; $putty: #beae8a; $toupe: #c7ac7d; $mushroom: #ba9e88; $greyish: #a8a495; $sandstone: #c9ae74; $bland: #afa88b; $taupe: #b9a281; $stone: #ada587; $dust: #b2996e; $pale-brown: #b1916e; $warm-grey: #978a84; $dark-beige: #ac9362; $clay: #b66a50; $dark-sand: #a88f59; $yellow-orange: #fcb001; $light-brown: #ad8150; $dark-tan: #af884a; $golden: #f5bf03; $tan-brown: #ab7e4c; $puce: #a57e52; $brown-grey: #8d8468; $brownish: #9c6d57; $coffee: #a6814c; $dark-khaki: #9b8f55; $clay-brown: #b2713d; $mocha: #9d7651; $brownish-orange: #cb7723; $brownish-grey: #86775f; $pumpkin: #e17701; $leather: #ac7434; $earth: #a2653e; $burnt-yellow: #d5ab09; $deep-orange: #dc4d01; $copper: #b66325; $rusty-orange: #cd5909; $dull-brown: #876e4b; $grey-brown: #7f7053; $yellow-ochre: #cb9d06; $dirt: #8a6e45; $dirty-orange: #c87606; $dark-taupe: #7f684e; $browny-orange: #ca6b02; $rust-orange: #c45508; $ocher: #bf9b0c; $brick-orange: #c14a09; $ocre: #c69c04; $cocoa: #875f42; $greyish-brown: #7a6a4f; $dark-orange: #c65102; $dark-gold: #b59410; $ochre: #bf9005; $sepia: #985e2b; $burnt-orange: #c04e01; $burnt-sienna: #b04e0f; $orange-brown: #be6400; $dirt-brown: #836539; $brown-orange: #b96902; $baby-shit-brown: #ad900d; $burnt-siena: #b75203; $yellowy-brown: #ae8b0c; $caramel: #af6f09; $yellow-brown: #b79400; $orangish-brown: #b25f03; $orangey-brown: #b16002; $golden-brown: #b27a01; $cinnamon: #ac4f06; $umber: #b26400; $rust: #a83c09; $raw-umber: #a75e09; $mustard-brown: #ac7e04; $burnt-umber: #a0450e; $dark-mustard: #a88905; $bronze: #a87900; $hazel: #8e7618; $russet: #a13905; $diarrhea: #9f8303; $milk-chocolate: #7f4e1e; $yellowish-brown: #9b7a01; $auburn: #9a3001; $raw-sienna: #9a6200; $puke-brown: #947706; $warm-brown: #964e02; $brown-red: #922b05; $poo: #8f7303; $medium-brown: #7f5112; $rust-brown: #8b3103; $muddy-brown: #886806; $poo-brown: #885f01; $reddish-brown: #7f2b0a; $mud: #735c12; $shit-brown: #7b5804; $shit: #7f5f00; $poop: #7f5e00; $poop-brown: #7a5901; $chestnut: #742802; $mud-brown: #60460f; $chocolate-brown: #411900; $dark-brown: #341c02;
Tailwind
theme: {
extend: {
colors: {
"tan": "#d2b48c",
"goldenrod": "#daa520",
"chocolate": "#d2691e",
"sienna": "#a0522d",
"darkgoldenrod": "#b8860b",
"saddlebrown": "#8b4513",
"putty": "#beae8a",
"toupe": "#c7ac7d",
"mushroom": "#ba9e88",
"greyish": "#a8a495",
"sandstone": "#c9ae74",
"bland": "#afa88b",
"taupe": "#b9a281",
"stone": "#ada587",
"dust": "#b2996e",
"pale-brown": "#b1916e",
"warm-grey": "#978a84",
"dark-beige": "#ac9362",
"clay": "#b66a50",
"dark-sand": "#a88f59",
"yellow-orange": "#fcb001",
"light-brown": "#ad8150",
"dark-tan": "#af884a",
"golden": "#f5bf03",
"tan-brown": "#ab7e4c",
"puce": "#a57e52",
"brown-grey": "#8d8468",
"brownish": "#9c6d57",
"coffee": "#a6814c",
"dark-khaki": "#9b8f55",
"clay-brown": "#b2713d",
"mocha": "#9d7651",
"brownish-orange": "#cb7723",
"brownish-grey": "#86775f",
"pumpkin": "#e17701",
"leather": "#ac7434",
"earth": "#a2653e",
"burnt-yellow": "#d5ab09",
"deep-orange": "#dc4d01",
"copper": "#b66325",
"rusty-orange": "#cd5909",
"dull-brown": "#876e4b",
"grey-brown": "#7f7053",
"yellow-ochre": "#cb9d06",
"dirt": "#8a6e45",
"dirty-orange": "#c87606",
"dark-taupe": "#7f684e",
"browny-orange": "#ca6b02",
"rust-orange": "#c45508",
"ocher": "#bf9b0c",
"brick-orange": "#c14a09",
"ocre": "#c69c04",
"cocoa": "#875f42",
"greyish-brown": "#7a6a4f",
"dark-orange": "#c65102",
"dark-gold": "#b59410",
"ochre": "#bf9005",
"sepia": "#985e2b",
"burnt-orange": "#c04e01",
"burnt-sienna": "#b04e0f",
"orange-brown": "#be6400",
"dirt-brown": "#836539",
"brown-orange": "#b96902",
"baby-shit-brown": "#ad900d",
"burnt-siena": "#b75203",
"yellowy-brown": "#ae8b0c",
"caramel": "#af6f09",
"yellow-brown": "#b79400",
"orangish-brown": "#b25f03",
"orangey-brown": "#b16002",
"golden-brown": "#b27a01",
"cinnamon": "#ac4f06",
"umber": "#b26400",
"rust": "#a83c09",
"raw-umber": "#a75e09",
"mustard-brown": "#ac7e04",
"burnt-umber": "#a0450e",
"dark-mustard": "#a88905",
"bronze": "#a87900",
"hazel": "#8e7618",
"russet": "#a13905",
"diarrhea": "#9f8303",
"milk-chocolate": "#7f4e1e",
"yellowish-brown": "#9b7a01",
"auburn": "#9a3001",
"raw-sienna": "#9a6200",
"puke-brown": "#947706",
"warm-brown": "#964e02",
"brown-red": "#922b05",
"poo": "#8f7303",
"medium-brown": "#7f5112",
"rust-brown": "#8b3103",
"muddy-brown": "#886806",
"poo-brown": "#885f01",
"reddish-brown": "#7f2b0a",
"mud": "#735c12",
"shit-brown": "#7b5804",
"shit": "#7f5f00",
"poop": "#7f5e00",
"poop-brown": "#7a5901",
"chestnut": "#742802",
"mud-brown": "#60460f",
"chocolate-brown": "#411900",
"dark-brown": "#341c02",
}
}
} Browse other color families
Copied
Brown & tan color names
Brown is not a separate hue — it is orange and red at low lightness or low saturation, roughly hue 15–45° with lightness under 45% or saturation under 45%. That is why it has no place on a standard colour wheel yet still needs its own list. This family covers tan, beige, sienna, chocolate and the muted earth tones.
Using these colors
Browns anchor palettes that would otherwise feel cold. They pair well with cream, sage green and muted blue, and they are the default for anything evoking wood, leather, coffee or craft. Because they are desaturated, browns hold up at large sizes where a saturated colour would overwhelm — they make good background and surface colours.
Contrast and accessibility
The darker browns here make reliable text colours on light backgrounds, often passing AA comfortably. The lighter tans behave like off-whites and should be treated as backgrounds rather than text. Watch for mid-tone browns that fail against both white and black — they are usable only as fills.