Taupe is a grey-brown; the name is French for mole. At 22% saturation it is brown with most of the colour drained out, which is why it behaves like a neutral instead of a hue. Copy the HEX codes from any scheme below, or generate a harmonious taupe palette anchored to your own base colour.
Taupe Palette Ideas & HEX Codes
Warm Taupe is the widest, from #4E4238 to #CBB79E, and holds the darkest tone on the page. Taupe & Cream adds the light ground, #F0EBE3. Muted Taupe is the flattest of the three, never above 28% saturation, and sits closer to a warm grey than to a brown.
Warm Taupe
#4E4238
#6F6156
#8B7E74
#A89078
#CBB79E
Taupe & Cream
#F0EBE3
#DDD3C4
#C2B29A
#A89078
#7D6B58
Muted Taupe
#6D5D4E
#8A7968
#A69684
#C4B6A6
#E2D8CB
Anchored to a taupe base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.
Free, no sign-up Generated in your browser CSS, JSON & HEX export
Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.
What Goes With Taupe
Taupe is a base colour and it makes whatever sits on it look quieter and more considered: sage green, dusty rose, cream and black all settle against it. Interiors, fashion, packaging and minimalist brand systems use it as the substitute for grey when grey feels cold. Beige is the lighter version and brown the saturated one.
Frequently Asked Questions
What HEX codes make a taupe palette?
Taupe is a warm grey-brown neutral: build from a deep brown-grey anchor (#4E4238, #6D5D4E), a true taupe (#A89078) and soft cream tints (#CBB79E, #F0EBE3). The warm, muted, in-between tone is what makes taupe read as neither pure brown nor pure grey. Above you get three ready-made versions — Warm Taupe, Taupe & Cream and Muted Taupe — so you can lift a whole five-step ramp instead of assembling one. #4E4238 is the darkest code on the page and #F0EBE3 the lightest, a pairing worth 8.1:1, enough for body text at any size under WCAG AA and AAA.
What is the difference between taupe and beige?
Taupe and beige differ mostly in lightness. Beige #D5BDAF is 76% light; taupe #A89078 is 56%. They sit at almost the same hue, 22° and 30°, with similar low saturation, so the practical difference is that beige works as a background and taupe works as the mid-tone you put beige on top of.
How do I use these colours in CSS?
Click Copy CSS for a ready-to-paste :root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. The generator here starts anchored to #A89078, so the first block you copy is a set of taupe variations rather than a random hue. Copy JSON returns the same five values as an array for a build step or a token file, and Copy HEX returns them as a plain comma-separated line. Lock any swatch you want to keep before generating again and it survives into the next export.
Which taupe shades are readable as text on white?
The deeper taupe shades work as body text on white and the pale ones do not. The base shade used here, #A89078, gives 3:1 against #FFFFFF, usable for large headings but not for body text. The darkest code on this page, #4E4238, reaches 9.7:1 on white and clears WCAG AA for body text and AAA as well. The palest, #F0EBE3, sits at 1.1:1 and belongs behind text rather than in it, with something dark on top.