What color is Copper?
HEX
#B87333
RGB
184, 115, 51
HSL
29°, 57%, 46%
HSV
29°, 72%, 72%
Copper (#B87333) is a warm, reddish-brown metallic tone that bridges rustic and contemporary design. It works as a premium accent color for brands in architecture, food, and lifestyle.
Best for
Consulting deliverables, strategy documents, and data-driven layouts.
Accessibility
Check contrast before using copper for text-heavy layouts, especially on low-contrast backgrounds.
How does copper compare to nearby colors?
What is the difference between copper and sienna?
Copper (#B87333) and Sienna (#A0522D) may look neighboring at first glance, yet their surface character diverges once they sit next to whites, charcoals, and other real layout neutrals. The practical difference is not raw contrast so much as project fit: Copper reads more naturally in consumer marketing and warm editorial palettes, while Sienna fits more easily into outdoor, food, and lifestyle systems. Choose copper when the surrounding system aligns better with consumer marketing and warm editorial palettes, and move to sienna when the stronger contextual fit is outdoor, food, and lifestyle systems.
What color is copper?
Copper is both a metal and a color, trending in interior design and industrial aesthetics. The warm metallic tone is popular in kitchen fixtures, lighting, and architectural details, bridging rustic and contemporary design styles.
What is the hex code for copper?
| Format | Value |
|---|---|
| HEX | #B87333 |
| RGB | rgb(184, 115, 51) |
| HSL | hsl(29°, 57%, 46%) |
| HSV / HSB | hsv(29°, 72%, 72%) |
| CMYK (approx.) | cmyk(0%, 38%, 72%, 28%) |
Convert Copper to other color formats
Open the color converter with Copper (#B87333) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Copper in the color converter →What does copper mean in design?
Copper communicates warmth, craftsmanship, and industrial elegance. It carries associations of skilled metalwork, autumn, and heritage manufacturing. In design, copper adds a premium, artisanal quality that feels more grounded than gold.
How do I use copper in code?
| CSS (hex) | color: #B87333; |
| CSS (rgb) | color: rgb(184, 115, 51); |
| CSS (hsl) | color: hsl(29, 57%, 46%); |
| RGB % | rgb(72%, 45%, 20%) |
| Tailwind | text-[#B87333] |
| SwiftUI | Color(red: 0.722, green: 0.451, blue: 0.200) |
| UIKit | UIColor(red: 0.722, green: 0.451, blue: 0.200, alpha: 1.0) |
| Android | Color.rgb(184, 115, 51) |
| Compose | Color(0xFFB87333) |
| Web Safe | #CC6633 |
Is copper accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 3.79:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaBlack text on this color | 5.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on white | 3.79:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on black | 5.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does copper look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with copper
White is a reliable partner for copper when the goal is clarity: it adds separation, preserves brightness, and avoids extra mood-shifting.
Navy blue gives copper the dark-value contrast it needs to feel designed rather than just bright.
Cream gives copper a quieter backdrop and preserves a more natural editorial feel than a colder off-white would.
What colors clash with copper
With copper, Neon Green pushes the work toward novelty or screen-effect territory faster than most brand or editorial systems can tolerate.
Magenta pushes copper toward a nightclub or cosmetic register that is hard to square with calmer editorial or product work.
How should I use copper in design?
- •Use copper as an accent on dark backgrounds (black, charcoal, navy) for an industrial-luxury aesthetic.
- •Pair copper with cream and forest green for a natural, artisanal palette.
- •Copper works well for icon fills, divider lines, and small typographic accents — avoid large areas.
What are good copper palettes?
Onyx foundation
Consulting deliverables, strategy documents, and data-driven layouts.
Bare essentials
Nonprofit campaigns, fundraising pages, and grant materials.
Design with copper in Moda
Create a presentation or document using copper as your accent color. Moda's AI applies your color palette automatically.
Create a design with copper →What are the shades and tints of copper?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for copper?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Sienna
Sienna stays very close to copper in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Burnt Orange
Burnt Orange is almost the same hue as copper; the real difference is value, with burnt orange feeling more grounded and anchor-ready.
Rust
Rust stays very close to copper in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Mocha
Mocha tracks close to copper in hue, but the value shift changes where each one earns its place: mocha is easier to use for headlines, anchors, and darker sections, while copper holds onto lighter surfaces and more open applications.
Persimmon
Persimmon sits close to copper on the wheel, but it carries more pigment pressure, which makes it better for faster emphasis and brighter accent work than for broader coverage and quieter supporting roles.
Frequently asked questions
What is the hex code for copper?
The hex code for copper is #B87333. In RGB, that's 184 red, 115 green, and 51 blue. The approximate CMYK equivalent is 0% cyan, 38% magenta, 72% yellow, and 28% key (black).
Is copper a warm or cool color?
Copper reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.
Where does copper work best in a layout?
Copper is flexible enough to move between accents, section blocks, and supporting roles depending on the contrast around it. It works best when the rest of the palette gives it a clear job instead of asking it to do everything at once.
How should I use copper in a design?
Copper is versatile enough for headlines, accent bars, buttons, charts, or section backgrounds depending on the contrast around it. It works as either a primary or supporting color in decks, documents, and brand systems.
Can I use copper for text or backgrounds?
Copper works better with dark text than white text. Black text reaches 5.54:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More orange colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Orange colors
Compare copper with other orange tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Red colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.