Palette

Copper Patina Gleam

Warm, inviting hues that reflect the mellowed beauty of aged copper and its unique luster.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Copper Patina Gleam reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Copper Patina Gleam.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#B87333#D49B5B#F7CD9A#8A4F1D#6C3D15

Palette guide

How to use Copper Patina Gleam

Overview

The Copper Patina Gleam palette captures the mellowed beauty of aged copper and its unique luster, offering a warm and inviting collection of hues. Anchored by the classic #B87333 (Copper) and enriched by #D49B5B (Aged Bronze), this palette provides designers with a sophisticated range. The lighter #F7CD9A (Patina Glow) offers a delicate highlight, while the deep #8A4F1D (Dark Sepia) and #6C3D15 (Rich Umber) provide grounding depth. Developers can leverage these tones to create user interfaces that feel established, luxurious, and authentic, perfect for brands emphasizing heritage, craftsmanship, or timeless elegance. This palette is exceptionally versatile, blending rustic charm with refined appeal, ideal for projects seeking a distinguished and warm aesthetic.

Best used for

luxury artisan brand identity
vintage furniture website
heritage museum digital presence
gourmet food product packaging
classic interior design
boutique hotel branding

Suggested color roles

primary

#B87333 (Copper) serves as a strong, classic, and warm metallic base, ideal for main brand elements, headers, or significant UI components.

secondary

#D49B5B (Aged Bronze) offers a harmonious complement, slightly lighter but maintaining rich warmth. Suitable for subheadings or secondary content blocks.

accent

#F7CD9A (Patina Glow) provides a soft, luminous highlight. Use for delicate icons, hover states, or to draw subtle attention to key information.

background

#8A4F1D (Dark Sepia) offers a deep, grounding background, providing excellent contrast for lighter elements and a sense of depth.

text

#F7CD9A (Patina Glow) offers excellent readability against the darker shades like #8A4F1D or #6C3D15. For lighter backgrounds, use black or #6C3D15.

Accessibility notes

Ensure #F7CD9A text has high contrast against #8A4F1D or #6C3D15 for optimal readability, meeting WCAG AA standards.
Avoid using #B87333 and #D49B5B for text and background combinations due to their similar luminosity.
When using #F7CD9A for text, pair it with a significantly dark background to ensure legibility, especially for small text.
Check contrast ratios for all interactive elements, ensuring they are clearly distinguishable against adjacent colors.

Recommended combinations

Elegant Core

Creates a sophisticated, warm, and rich brand identity, excellent for upscale logos and primary web sections.

#B87333 · #D49B5B · #8A4F1D

Luminous Patina

Ideal for highlighting metallic sheen or creating a sense of aged luster within content areas.

#D49B5B · #F7CD9A · #6C3D15

Deep Highlight

Effective for strong headlines or calls-to-action against a light background, providing clear hierarchy and depth.

#6C3D15 · #F7CD9A · #8A4F1D

CSS variables

:root {
  --copper-patina-gleam-2-1: #B87333;
  --copper-patina-gleam-2-2: #D49B5B;
  --copper-patina-gleam-2-3: #F7CD9A;
  --copper-patina-gleam-2-4: #8A4F1D;
  --copper-patina-gleam-2-5: #6C3D15;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "copper-patina-gleam-2": {
        1: "#B87333",
        2: "#D49B5B",
        3: "#F7CD9A",
        4: "#8A4F1D",
        5: "#6C3D15",
      }
    }
  }
}

Hex values

Color 1#B87333

Color 2#D49B5B

Color 3#F7CD9A

Color 4#8A4F1D

Color 5#6C3D15

Accessibility

Contrast checker

1.6:1Fail

2.6:1Fail

1.7:1Fail

2.4:1Fail

1.6:1Fail

2.7:1Fail

3.7:1AA18

2.6:1Fail

1.6:1Fail

4.4:1AA18

6.1:1AA

1.7:1Fail

2.7:1Fail

4.4:1AA18

1.4:1Fail

2.4:1Fail

3.7:1AA18

6.1:1AA

1.4:1Fail

Similar palettes

More like Copper Patina Gleam

Copper Patina Gleam

See it in context.

Ready when you are.

Built with Copper Patina Gleam.

How to use Copper Patina Gleam

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Elegant Core

Luminous Patina

Deep Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Copper Patina Gleam