Copper (#B87333) — Color Codes, Meaning & UI Palettes
Copper (#B87333) is an earthy reddish-brown named after the ancient elemental metal revered for over 10,000 years. It embodies craftsmanship, industrial warmth, autumnal harvest, and conductive energy.
#B87333. In RGB, it is rgb(184, 115, 51). In HSL, it is hsl(29deg, 57%, 46%), and its print CMYK formulation is cmyk(0%, 38%, 72%, 28%). It has a relative luminance of 0.227 and pairs best in UI design with Deep Slate Gray (#1E293B) and Sage Green (#9CAF88).
WCAG 2.1 Accessibility & Contrast Rating
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:
Color Harmonies & Palette Schemes
Complementary
Analogous -30°
Analogous +30°
Triadic +120°
Triadic +240°
Curated UI Design Pairings for Copper
Dynamic primary button or highlight color for coffee roasters, hardware startups, architectural portfolios, and autumn showcases. Pairs with deep charcoal and sage green.
Export Copper Code Snippets
--color-copper-color: #B87333;
'copper-color': '#B87333'
Color(hex: "#B87333")
{"name": "Copper", "hex": "#B87333"}
Frequently Asked Questions About Copper (#B87333)
What is the exact HEX code for Copper?
The exact HEX code for Copper is #B87333. In 8-digit hexadecimal (with 100% opacity), it is #B87333FF. Its RGB decimal equivalent is rgb(184, 115, 51) and its HSL value is hsl(29deg, 57%, 46%).
What colors go best with Copper in UI and web design?
Copper pairs exceptionally well with Deep Slate Gray (#1E293B), Sage Green (#9CAF88), Warm Travertine (#FAF6EF), and Burnished Bronze (#7C451B).
How do I use Copper in CSS and Tailwind CSS?
In standard CSS, apply it directly via color: #B87333; or background-color: #B87333;. In Tailwind CSS, use arbitrary value syntax like bg-[#b87333] or text-[#b87333], or define it in your Tailwind v4 @theme block as --color-copper-color: #B87333;.
Is Copper WCAG accessible for readable text?
Against a pure white background (#FFFFFF), Copper achieves a contrast ratio of 3.79:1 (AA Large). Against a pure black background (#000000), it achieves 5.54:1 (AA). 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.