#483C32Taupe hex code: #483C32 · RGB 72, 60, 50. Also called mole, greige (light versions).
Taupe comes from the French word for mole, after the animal's fur. Color references list a dark gray-brown at #483C32, but most people today use 'taupe' for lighter gray-beige tones like #B38B6D or #D3C4B5, especially in interiors and fashion. Taupe is defined more by its mix of gray and brown than by any single value.
Taupe is a sophisticated neutral for interiors, real estate, fashion, cosmetics and minimal brand sites. Dark taupe can replace black for text and headers when you want a softer, warmer look.
Dark taupe works as a text color on cream or white (it passes AAA on white). Light taupes need dark text. Taupe pairs with cream, blush, sage, navy and brass accents.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#483C32rgb(72, 60, 50) · reference#674C47rgb(103, 76, 71) · HueWiz pick#B38B6Drgb(179, 139, 109) · HueWiz pick#D3C4B5rgb(211, 196, 181) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with taupe's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around taupe.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#F9F6F4 · text #221E1B · link #483C32Spring collection
Designed around taupe.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#161311 · text #F0EEEC · link #8A7C71Hand-picked combinations that work with taupe. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on taupe | 10.67:1 | AAA | AAA |
| Black text on taupe | 1.96:1 | Fail | Fail |
| Taupe text on white | 10.67:1 | AAA | AAA |
| Taupe text on near-black #111111 | 1.76:1 | Fail | Fail |
An 11-step 50–950 ramp generated in OKLCH from #483C32. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-taupe-50: #FAF6F3;
--color-taupe-100: #F0ECE8;
--color-taupe-200: #DFDAD5;
--color-taupe-300: #C8C1BC;
--color-taupe-400: #ACA49E;
--color-taupe-500: #928981;
--color-taupe-600: #786E65;
--color-taupe-700: #62574E;
--color-taupe-800: #4D4137;
--color-taupe-900: #372D24;
--color-taupe-950: #231A12;
--color-taupe: #483C32;
}:root {
--taupe: #483C32;
--taupe-rgb: 72 60 50;
--taupe-light: #F0ECE8;
--taupe-dark: #4D4137;
}
.btn-taupe {
background: #483C32;
color: #FFFFFF;
}Need semantic roles (surface, text, primary, accent) and exports? Open taupe in the Tailwind color generator.
#483C32 is the value HueWiz uses for taupe; it equals rgb(72, 60, 50). Other common versions include #674C47 (medium taupe), #B38B6D (light taupe), #D3C4B5 (pale taupe).
With an HSL hue of 27° and 18% saturation, taupe reads as a warm orange.
Use white or very light text. White on #483C32 measures 10.67:1 and black measures 1.96:1; WCAG AA needs 4.5:1 for normal text.
Try warm minimal (#F6F2EC, #D3C4B5, #B38B6D); taupe & blush (#D3C4B5, #F4C2C2, #FFFFFF); taupe & navy (#B38B6D, #1D3557, #F7F4EF). Each palette above can be copied or opened in the HueWiz studio.
Taupe isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.