Colors EncyclopediaNamed color
Copper
Copper color #B87333: RGB 184, 115, 51 and HSL 29°, 57%, 46%. Explore its warm orange profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Copper
Open a professional color tool with #B87333 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 Copper 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-copper: #B87333;
.bg-copper { background-color: #B87333; }
.text-copper { color: #B87333; }Color history, meaning and use · Editorially reviewed
About Copper Color
Fresh copper is recognized by a reddish-pink metallic glow, but that surface is not static. Exposure to humidity, pollutants, salts, acids, and deliberate patination can drive copper toward brown, black, red, blue-green, or green surfaces. Historic metalworkers also developed chemical recipes to produce selected colors rather than waiting for natural weathering.
Digital Copper represents the warm base metal more than its reflective behavior. It works with charcoal, deep teal, and mineral neutrals, but a flat HEX cannot reproduce highlights, alloy composition, polishing, or patina. Designers should distinguish copper color from copper material: applying the swatch does not automatically create a metallic appearance.
This HEX is a screen reference, not an alloy specification, finish standard, corrosion diagnosis, or patination recipe.
WCAG Accessibility
Contrast checks for Copper against black and white text.
Black text5.54:1AA Pass
White text3.79:1AA Fail
Downloadable color reference infographic
Copper Color Reference Infographic
Save a high-resolution infographic of Copper, 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.2269
Black text5.54:1AA Pass
White text3.79:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#B87333",
"rgb": [
184,
115,
51
],
"hsl": [
29,
57,
46
],
"cmyk": [
0,
38,
72,
28
],
"luminance": 0.2269,
"contrast": {
"black": 5.54,
"white": 3.79
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
}Harmonies
{
"complementary": "#3278B8",
"analogous": [
"#B83235",
"#B8B632"
],
"triadic": [
"#32B873",
"#7332B8"
],
"tetradic": [
"#35B832",
"#3278B8",
"#B632B8"
],
"splitComplementary": [
"#32B8B6",
"#3235B8"
],
"monochromatic": [
"#D8A16F",
"#B87333",
"#70461F"
]
}Variants
{
"light": "#D8A16F",
"dark": "#70461F",
"saturated": "#D27219",
"desaturated": "#9E744C",
"pastel": "#D4B496",
"neon": "#FF8614"
}Pairings
{
"best": [
"#000000",
"#3278B8",
"#B83235",
"#B8B632"
],
"avoid": [
"#9E744C",
"#D8A16F"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#D8A16F",
"#9E744C"
]
}Knowledge graph
{
"nearestColors": [
"polished-copper",
"adobe",
"bronze",
"desert-clay",
"ochre"
],
"generatedPalettes": [
"copper"
],
"generatedComparisons": [
"copper-vs-adobe",
"copper-vs-polished-copper"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone"
],
"relatedTools": [
"/harmonies/copper",
"/wcag/copper",
"/css/colors/copper",
"/hex/b87333",
"/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/earth-tone"
],
"narrower": [
"/palettes/copper"
],
"related": [
"/colors/polished-copper",
"/colors/adobe",
"/colors/bronze",
"/colors/desert-clay",
"/colors/ochre",
"/compare/copper-vs-adobe",
"/compare/copper-vs-polished-copper",
"/harmonies/copper",
"/wcag/copper",
"/css/colors/copper",
"/hex/b87333",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "copper",
"name": "Copper",
"hex": "#B87333",
"uses": [
"warm accents",
"food branding",
"interior palettes"
],
"psychology": {
"associations": [
"warmth",
"comfort",
"approachability"
],
"contexts": [
"hospitality",
"craft",
"food",
"home decor"
],
"avoidIn": [
"cold technical interfaces"
]
},
"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": [
"earth-tone"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"orange",
"warm",
"earth-tone",
"warm-accents",
"food-branding",
"interior-palettes",
"warmth",
"comfort",
"approachability"
],
"popularity": 84,
"rgb": [
184,
115,
51
],
"hsl": [
29,
57,
46
],
"cmyk": [
0,
38,
72,
28
],
"luminance": 0.2269,
"contrast": {
"black": 5.54,
"white": 3.79
},
"harmonies": {
"complementary": "#3278B8",
"analogous": [
"#B83235",
"#B8B632"
],
"triadic": [
"#32B873",
"#7332B8"
],
"tetradic": [
"#35B832",
"#3278B8",
"#B632B8"
],
"splitComplementary": [
"#32B8B6",
"#3235B8"
],
"monochromatic": [
"#D8A16F",
"#B87333",
"#70461F"
]
},
"variants": {
"light": "#D8A16F",
"dark": "#70461F",
"saturated": "#D27219",
"desaturated": "#9E744C",
"pastel": "#D4B496",
"neon": "#FF8614"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
},
"css": {
"variable": "--color-copper: #B87333;",
"utility": ".bg-copper { background-color: #B87333; }",
"textUtility": ".text-copper { color: #B87333; }"
},
"nearestColors": [
"polished-copper",
"adobe",
"bronze",
"desert-clay",
"ochre"
],
"generatedPalettes": [
"copper"
],
"generatedComparisons": [
"copper-vs-adobe",
"copper-vs-polished-copper"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone"
],
"relatedTools": [
"/harmonies/copper",
"/wcag/copper",
"/css/colors/copper",
"/hex/b87333",
"/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/earth-tone"
],
"narrower": [
"/palettes/copper"
],
"related": [
"/colors/polished-copper",
"/colors/adobe",
"/colors/bronze",
"/colors/desert-clay",
"/colors/ochre",
"/compare/copper-vs-adobe",
"/compare/copper-vs-polished-copper",
"/harmonies/copper",
"/wcag/copper",
"/css/colors/copper",
"/hex/b87333",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#3278B8",
"#B83235",
"#B8B632"
],
"avoid": [
"#9E744C",
"#D8A16F"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#D8A16F",
"#9E744C"
]
}
}