Palette

Ancient Bronze Relic

Rich, warm tones reminiscent of a forgotten, tarnished bronze artifact, weathered by time and elements.

earthelegant5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ancient Bronze Relic 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 Ancient Bronze Relic.

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

Data visualization

#704214#945B2D#C67C3A#E4A77D#553311

Palette guide

How to use Ancient Bronze Relic

Overview

The 'Ancient Bronze Relic' palette offers rich, warm tones reminiscent of a forgotten, tarnished bronze artifact, weathered by time and elements. This earthy collection features a spectrum of browns and oranges, from the deep #553311 to the inviting #704214, and the brighter #C67C3A. The soft #E4A77D provides a gentle, aged highlight, while #945B2D balances the scheme with a versatile mid-tone. It's an evocative palette ideal for designs seeking to convey history, durability, and a rustic charm, creating a sense of timelessness and warmth, perfect for heritage-inspired projects.

Best used for

Rustic home decor and interior design
Historical game environments and assets
Antique market branding and promotions
Natural material product lines (e.g., leather goods)
Adventure book covers and illustrations
Film title sequences with an aged aesthetic

Suggested color roles

primary

Utilize #945B2D as a warm, inviting primary color for headers, foundational elements, or prominent design features.

secondary

Apply #704214 for deeper, aged brown accents, strong typography, or background elements requiring substance.

accent

Add a brighter, metallic highlight with #C67C3A, ideal for calls-to-action, decorative motifs, or interactive states.

background

The soft, earthy #E4A77D makes an excellent background, providing a gentle canvas that feels aged and welcoming.

text

For optimal readability and a robust feel, use #553311 for body text and essential information against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when pairing #553311 or #704214 with lighter shades like #E4A77D for text.
Avoid using #C67C3A on #945B2D for small text, as the contrast may be insufficient for some users.
Interactive elements should clearly distinguish states; use darker shades for default and lighter for hover/active.
Verify readability of all text against chosen background colors, especially for body copy.

Recommended combinations

Relic Core

Forms a strong, deep base for main content and primary text, ensuring excellent readability and a solid feel.

#553311 · #704214 · #945B2D

Tarnished Glow

Ideal for soft highlights, background elements, or creating a luminous effect that suggests aged metal.

#E4A77D · #C67C3A · #945B2D

Earthy Bronze

Creates layered elements and a natural feel, suitable for displaying textures or visual hierarchy with warmth.

#704214 · #E4A77D · #C67C3A

CSS variables

:root {
  --ancient-bronze-relic-2-1: #704214;
  --ancient-bronze-relic-2-2: #945B2D;
  --ancient-bronze-relic-2-3: #C67C3A;
  --ancient-bronze-relic-2-4: #E4A77D;
  --ancient-bronze-relic-2-5: #553311;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-bronze-relic-2": {
        1: "#704214",
        2: "#945B2D",
        3: "#C67C3A",
        4: "#E4A77D",
        5: "#553311",
      }
    }
  }
}

Hex values

Color 1#704214

Color 2#945B2D

Color 3#C67C3A

Color 4#E4A77D

Color 5#553311

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.1:1AA18

1.3:1Fail

1.5:1Fail

1.7:1Fail

2.7:1Fail

2:1Fail

2.6:1Fail

1.7:1Fail

1.6:1Fail

3.4:1AA18