Pikka Logo Pikka
Chrome App
Sophisticated Dark Brown-Gray Neutral Category: Brown

Taupe (#483C32) — Color Codes, Meaning & UI Palettes

Taupe (#483C32) takes its name from the French noun for mole, describing a deep, warm grayish-brown neutral. It is celebrated in high-end architectural and fashion design for its understated elegance, neutrality, and grounded organic balance.

Quick Answer (Taupe Color Code): The exact HEX code for Taupe is #483C32. In RGB, it is rgb(72, 60, 50). In HSL, it is hsl(27deg, 18%, 24%), and its print CMYK formulation is cmyk(0%, 17%, 31%, 72%). It has a relative luminance of 0.048 and pairs best in UI design with Travertine Beige (#E7DEC8) and Alabaster White (#F2F0EB).
Click to Copy HEX
Taupe
#483C32
HEX
#483C32
RGB
rgb(72, 60, 50)
HSL
hsl(27deg, 18%, 24%)
CMYK (Print)
cmyk(0%, 17%, 31%, 72%)
Apple Display P3
color(display-p3 0.282 0.235 0.196)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 10.71:1 (AAA)
Black Text (#000000) 1.96:1 (Fail)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#F7F5F3
100
#EEEAE7
200
#DED5CF
300
#C9BCB1
400
#B09C8D
500
#483C32
600
#3B3129
700
#2F2721
800
#231D18
900
#171310
950
#0D0B09

Color Harmonies & Palette Schemes

Complementary

#323E48
Opposite 180° Contrast

Analogous -30°

#483233
Natural Harmony

Analogous +30°

#484732
Natural Harmony

Triadic +120°

#32483C
120° Balanced Triad

Triadic +240°

#3C3248
120° Balanced Triad

Curated UI Design Pairings for Taupe

Top-tier dark neutral for luxury editorial sites, modern typography, card borders, and architectural portfolios. High contrast against cream and linen backgrounds.

Travertine Beige
#E7DEC8
Textured Warm Background
Alabaster White
#F2F0EB
Crisp Light Surface
Warm Amber
#D97706
Artisanal Highlight
Charcoal Brown
#2A241F
Deep Framing Border

Export Taupe Code Snippets

CSS Variable --color-taupe-color: #483C32;
Tailwind Config 'taupe-color': '#483C32'
Swift / SwiftUI Color(hex: "#483C32")
JSON Design Token {"name": "Taupe", "hex": "#483C32"}

Frequently Asked Questions About Taupe (#483C32)

What is the exact HEX code for Taupe?

The exact HEX code for Taupe is #483C32. In 8-digit hexadecimal (with 100% opacity), it is #483C32FF. Its RGB decimal equivalent is rgb(72, 60, 50) and its HSL value is hsl(27deg, 18%, 24%).

What colors go best with Taupe in UI and web design?

Taupe pairs exceptionally well with Travertine Beige (#E7DEC8), Alabaster White (#F2F0EB), Warm Amber (#D97706), and Charcoal Brown (#2A241F).

How do I use Taupe in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #483C32; or background-color: #483C32;. In Tailwind CSS, use arbitrary value syntax like bg-[#483c32] or text-[#483c32], or define it in your Tailwind v4 @theme block as --color-taupe-color: #483C32;.

Is Taupe WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Taupe achieves a contrast ratio of 10.71:1 (AAA). Against a pure black background (#000000), it achieves 1.96:1 (Fail). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator