Colors EncyclopediaNamed color
Taupe
Taupe color #483C32: RGB 72, 60, 50 and HSL 27°, 18%, 24%. Explore its warm orange profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Taupe
Open a professional color tool with #483C32 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Taupe and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-taupe: #483C32;
.bg-taupe { background-color: #483C32; }
.text-taupe { color: #483C32; }Color meaning and use
About Taupe Color
Taupe uses HEX #483C32, RGB 72, 60, 50, and HSL 27°, 18%, 24%. The dataset classifies it in the orange family with warm temperature and dark and earth tone visual character.
No separate named-color neighbor is recorded for this entry. Its relative luminance is 0.0484; black contrast is 1.97:1 and white contrast is 10.67:1, making white the stronger of those two standard foreground choices.
WCAG Accessibility
Contrast checks for Taupe against black and white text.
Black text1.97:1AA Fail
White text10.67:1AA Pass
Downloadable color reference infographic
Taupe Color Reference Infographic
Save a high-resolution infographic of Taupe, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.0484
Black text1.97:1AA Fail
White text10.67:1AA Pass
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#483C32",
"rgb": [
72,
60,
50
],
"hsl": [
27,
18,
24
],
"cmyk": [
0,
17,
31,
72
],
"luminance": 0.0484,
"contrast": {
"black": 1.97,
"white": 10.67
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
}Harmonies
{
"complementary": "#323E48",
"analogous": [
"#483233",
"#484732"
],
"triadic": [
"#32483C",
"#3C3248"
],
"tetradic": [
"#334832",
"#323E48",
"#473248"
],
"splitComplementary": [
"#324847",
"#323348"
],
"monochromatic": [
"#7E6958",
"#483C32",
"#120F0D"
]
}Variants
{
"light": "#7E6958",
"dark": "#120F0D",
"saturated": "#563B25",
"desaturated": "#3D3D3D",
"pastel": "#817D79",
"neon": "#A34900"
}Pairings
{
"best": [
"#FFFFFF",
"#323E48",
"#483233",
"#484732"
],
"avoid": [
"#3D3D3D",
"#7E6958"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#7E6958",
"#3D3D3D"
]
}Knowledge graph
{
"nearestColors": [
"pine-bark",
"graphite",
"espresso",
"peat",
"walnut"
],
"generatedPalettes": [
"taupe"
],
"generatedComparisons": [
"espresso-vs-taupe",
"pine-bark-vs-taupe",
"taupe-vs-graphite",
"walnut-vs-taupe"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/dark",
"/colors/by-tone/earth-tone"
],
"relatedTools": [
"/harmonies/taupe",
"/wcag/taupe",
"/css/colors/taupe",
"/hex/483c32",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/dark",
"/colors/by-tone/earth-tone"
],
"narrower": [
"/palettes/taupe"
],
"related": [
"/colors/pine-bark",
"/colors/graphite",
"/colors/espresso",
"/colors/peat",
"/colors/walnut",
"/compare/espresso-vs-taupe",
"/compare/pine-bark-vs-taupe",
"/compare/taupe-vs-graphite",
"/compare/walnut-vs-taupe",
"/harmonies/taupe",
"/wcag/taupe",
"/css/colors/taupe",
"/hex/483c32",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "taupe",
"name": "Taupe",
"hex": "#483C32",
"uses": [
"backgrounds",
"typography",
"product surfaces"
],
"psychology": {
"associations": [
"restraint",
"clarity",
"balance"
],
"contexts": [
"interfaces",
"architecture",
"editorial design",
"packaging"
],
"avoidIn": [
"high-energy accent-only palettes"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design and editorial color systems."
},
"family": "orange",
"temperature": "warm",
"tone": [
"dark",
"earth-tone"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"orange",
"warm",
"dark",
"earth-tone",
"backgrounds",
"typography",
"product-surfaces",
"restraint",
"clarity",
"balance"
],
"popularity": 84,
"rgb": [
72,
60,
50
],
"hsl": [
27,
18,
24
],
"cmyk": [
0,
17,
31,
72
],
"luminance": 0.0484,
"contrast": {
"black": 1.97,
"white": 10.67
},
"harmonies": {
"complementary": "#323E48",
"analogous": [
"#483233",
"#484732"
],
"triadic": [
"#32483C",
"#3C3248"
],
"tetradic": [
"#334832",
"#323E48",
"#473248"
],
"splitComplementary": [
"#324847",
"#323348"
],
"monochromatic": [
"#7E6958",
"#483C32",
"#120F0D"
]
},
"variants": {
"light": "#7E6958",
"dark": "#120F0D",
"saturated": "#563B25",
"desaturated": "#3D3D3D",
"pastel": "#817D79",
"neon": "#A34900"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
},
"css": {
"variable": "--color-taupe: #483C32;",
"utility": ".bg-taupe { background-color: #483C32; }",
"textUtility": ".text-taupe { color: #483C32; }"
},
"nearestColors": [
"pine-bark",
"graphite",
"espresso",
"peat",
"walnut"
],
"generatedPalettes": [
"taupe"
],
"generatedComparisons": [
"espresso-vs-taupe",
"pine-bark-vs-taupe",
"taupe-vs-graphite",
"walnut-vs-taupe"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/dark",
"/colors/by-tone/earth-tone"
],
"relatedTools": [
"/harmonies/taupe",
"/wcag/taupe",
"/css/colors/taupe",
"/hex/483c32",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/dark",
"/colors/by-tone/earth-tone"
],
"narrower": [
"/palettes/taupe"
],
"related": [
"/colors/pine-bark",
"/colors/graphite",
"/colors/espresso",
"/colors/peat",
"/colors/walnut",
"/compare/espresso-vs-taupe",
"/compare/pine-bark-vs-taupe",
"/compare/taupe-vs-graphite",
"/compare/walnut-vs-taupe",
"/harmonies/taupe",
"/wcag/taupe",
"/css/colors/taupe",
"/hex/483c32",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#323E48",
"#483233",
"#484732"
],
"avoid": [
"#3D3D3D",
"#7E6958"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#7E6958",
"#3D3D3D"
]
}
}