Palette

Copper Patina Gleam

Rich, earthy browns and oranges with an antique gleam, like aged copper developing a beautiful patina.

earthnatural5 colors

More earth 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

#523D26#7B5C3D#A37F55#D4A979#958B79

Palette guide

How to use Copper Patina Gleam

Overview

The Copper Patina Gleam palette offers rich, earthy browns and oranges with an antique gleam, like aged copper developing a beautiful patina. Featuring deep #523D26 (Dark Umber) and #7B5C3D (Muted Bronze), this collection provides designers with a grounding yet luminous range. The brighter #A37F55 and #D4A979 add warmth and highlights, while #958B79 introduces a unique, subtle grey-brown. Developers can utilize these hues to create user interfaces that feel established, authentic, and sophisticated, perfect for brands emphasizing heritage, natural materials, or timeless design. This palette is ideal for projects seeking a rustic yet refined aesthetic, offering a robust foundation with elegant, subtle accents.

Best used for

antique shop website design
heritage brand identity
rustic interior decor
organic product packaging
traditional craftsmanship showcases
historical fiction book covers

Suggested color roles

primary

#523D26 (Dark Umber) provides a strong, grounding base, ideal for main headers, navigation, or deep background sections.

secondary

#7B5C3D (Muted Bronze) offers a rich, earthy complement, suitable for subheadings, secondary content blocks, or subtle branding elements.

accent

#D4A979 (Light Patina) acts as a soft, luminous highlight. Perfect for delicate UI elements, icons, or to subtly draw attention to key information.

background

#A37F55 (Warm Stone) offers a versatile, mid-tone background that supports content without being too dark or light.

text

#523D26 (Dark Umber) offers excellent readability against lighter colors like #D4A979 or #A37F55. For darker backgrounds, consider white or a near-white.

Accessibility notes

Ensure #523D26 text has high contrast against #D4A979 or #A37F55 for optimal readability, meeting WCAG AA standards.
Avoid using #A37F55 and #958B79 for text and background combinations due to their similar luminosity and hue.
When using #D4A979 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

Earthy Foundation

Creates a grounded, warm, and authentic brand identity, excellent for logos and primary web sections.

#523D26 · #7B5C3D · #A37F55

Patina Highlight

Ideal for soft, aged backgrounds or subtle decorative elements, evoking a vintage and refined feel.

#A37F55 · #D4A979 · #958B79

Deep Accent

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

#523D26 · #D4A979 · #7B5C3D

CSS variables

:root {
  --copper-patina-gleam-1: #523D26;
  --copper-patina-gleam-2: #7B5C3D;
  --copper-patina-gleam-3: #A37F55;
  --copper-patina-gleam-4: #D4A979;
  --copper-patina-gleam-5: #958B79;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "copper-patina-gleam": {
        1: "#523D26",
        2: "#7B5C3D",
        3: "#A37F55",
        4: "#D4A979",
        5: "#958B79",
      }
    }
  }
}

Hex values

Color 1#523D26

Color 2#7B5C3D

Color 3#A37F55

Color 4#D4A979

Color 5#958B79

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

4.7:1AA

3:1AA18

1.7:1Fail

2.8:1Fail

1.8:1Fail

2.8:1Fail

1.7:1Fail

1.1:1Fail

4.7:1AA

2.8:1Fail

1.7:1Fail

1.6:1Fail

3:1AA18

1.8:1Fail

1.1:1Fail

1.6: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

Earthy Foundation

Patina Highlight

Deep Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Copper Patina Gleam