Copper and Black Color Scheme Examples: Balancing the Area of Decorations and Backgrounds

Copper and black can give a web banner a restrained but warm look when reddish copper accents sit against a dark background. If both colors take up large areas, however, the design can feel heavy. Too many copper ornaments can also compete with the product and its message. Using a product-promotion banner as an example, here is how to divide the space between backgrounds and decoration.

Start with a large black background and small copper accents

One possible copper color for screens is ■#B87333, a reddish brown that stands apart from near-black ■#151515. A HEX (hexadecimal) color code describes a screen color using a “#” followed by six digits or letters. There is no single universal HEX code for copper, and a flat color cannot reproduce the reflections of real metal. For this example, copper is simply a solid on-screen color.

Give black the background and wider bands, and use copper for a short underline, a fine border, or a small symbol. Keeping copper in selected spots can prevent it from competing with the headline or product information. There is no reason to split the canvas equally between black and copper. Decide on the background area first, then add decoration only where it serves a purpose.

Two banner layouts with different color-area balances

Example 1: A black-led product launch banner

For the colored areas excluding photographs, try near-black ■#151515 at roughly 80%, warm off-white ■#F6F0E8 at 15%, and copper ■#B87333 at 5%. Use black for the main background and off-white for a small panel around the product photo or an information divider. Place the large headline and supporting text in off-white on black. Reserve copper for the headline underline and a short separator. Rather than outlining the photo repeatedly, choose one element that deserves the accent.

Example 2: A lighter event announcement banner

If the first layout feels too dark, reverse the emphasis: warm off-white ■#F6F0E8 at around 70%, near-black ■#151515 at 25%, and copper ■#B87333 at 5%. Let off-white form the main background, with a black title band and black body text. Add copper as a short line beside the event date or as a restrained decorative border. Using black in a smaller area can give the same three colors a more open appearance.

These percentages are starting points for the colored surfaces, not rigid rules. They exclude photos and lettering. Adjust the layout for the image size and amount of text instead of measuring the 5% accent precisely.

Watch the amount of decoration and check text contrast

Before making a copper line thicker, consider removing extra decorative lines. One short stroke or small symbol may communicate the intended emphasis better than several competing borders. When increasing the copper area, reconsider the black background and the surrounding space as well.

Contrast ratio describes the difference in brightness between adjacent colors. In these examples, warm off-white ■#F6F0E8 against near-black ■#151515 has a contrast ratio of about 16.13:1, while copper ■#B87333 against near-black ■#151515 is about 4.82:1. Copper ■#B87333 against warm off-white ■#F6F0E8 is only about 3.35:1. Under the Web Content Accessibility Guidelines (WCAG) 2.2, the AA level calls for at least 4.5:1 for normal-sized text. Therefore, copper text on the off-white background does not meet that threshold; use near-black for headings and body copy there and keep copper for decoration.

If you fill a button with copper, also consider near-black ■#151515 rather than white text. White ■#FFFFFF against copper ■#B87333 has a ratio of about 3.79:1, whereas near-black ■#151515 against copper ■#B87333 reaches about 4.82:1. Borders and icons that are necessary to understand or operate the interface generally need a 3:1 contrast ratio against adjacent colors, and very thin strokes can still be hard to see. HueRoll can check the selected color against white or black, but other pairings, such as copper on off-white, must be checked separately.