
Figma color wheel
Want to find the perfect complementary or analogous colors to match taupe?
Skip to main content
Everything you need to know about taupe to inspire your next design.
Taupe is a subtle, refined gray-brown color that falls between red and yellow on the color wheel, giving it a rich, warm undertone. This muted neutral shade spans a range of colors, encompassing brownish grays and dark tans to evoke feelings of sophistication and stability.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Caffe Mocha
Mountain Views
The Woods
Taupe is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use taupe in your designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same dark spectrum as taupe, consider:
To complement taupe, consider pairing it with:
You can also consider pairing taupe with jewel tones for a luxurious look, shades of sage or olive green to complement taupe’s natural warmth, and lighter browns or tan for a balanced, rustic design.
While taupe is a warm, neutral color, it may clash with:
Taupe evokes practicality and sophistication, drawing on red-orange undertones for warmth. Taupe’s earthy brown and gray tones convey stability, composure, and practicality.
Taupe promotes feelings of calmness and composure. Its muted tone avoids overwhelming the senses, creating a grounded sense of tranquility. The red-orange undertones evoke comfort and warmth while also inspiring creativity.
Taupe can act as a calming counterpoint to bold colors, create hierarchy by allowing other colors to stand out, or evoke sophistication when paired with similar muted tones. Its versatility is highly regarded across applications to evoke warmth, professionalism, and elegance, creating a more inviting user experience.
The word taupe comes from the French “taupe” and Latin “talpa,” meaning “mole,” referring to the average color of moleskin. The earliest documented use of "taupe" to describe a color dates back to an 1846 newspaper article, which noted taupe as a fashionable choice among other shades.
Over time, taupe has been consistently used in fashion and interior design because of its versatility and understated elegance.
Contrast 9.07
#54463A
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 2.31
#54463A
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #54463A, known as taupe, has RGB values of R:84 G:70, B:58 and CMYK values of C:0, M:17, Y:31, K:67.
| VALUE | CSS | |
|---|---|---|
| HEX | #54463A | #54463A |
| RGB DECIMAL | 84, 70, 58 | RGB(84,70,58) |
| RGB PERCENTAGE | 32.9, 27.5, 22.7 | RGB(32.9%,27.5%,22.7%) |
| CMYK | 0, 17, 31, 67 | |
| HSL | 27.7°, 18.3, 27.8 | HSL(27.7,18.3%,27.8%) |
| HSV (OR HSB) | 27.7°, 31, 32.9 | |
| WEB SAFE | #663333 | #663333 |
| CIE-LAB | 30.809, 3.852, 9.456 | |
| XYZ | 6.61, 6.571, 4.923 | |
| xyY | 0.365, 0.363, 6.571 | |
| CIE-LCH | 30.809, 10.21, 67.833 | |
| CIE-LUV | 30.809, 9.052, 9.9 | |
| HUNTER-LAB | 25.634, 1.17, 6.557 | |
| BINARY | 01010100, 01000110, 00111010 | |
| iOS - SwiftUI | Color(red: 0.329, green: 0.275, blue: 0.227) | |
| iOS - UIKit | UIColor(red: 0.576, green: 0.745, blue: 0.902, alpha: 1) | |
| Android - Compose | Color(0xFF54463A) |

Want to find the perfect complementary or analogous colors to match taupe?
Discover the cool and muted color of blue-gray.
Discover the captivating color of midnight blue.