Palette

Copper Dusk

A sophisticated blend inspired by the metallic gleam of copper against the rich hues of twilight.

warmelegant5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Copper Dusk 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 Dusk.

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

Data visualization

#B87333#C5B358#4B0082#004F4F#36454F

Palette guide

How to use Copper Dusk

Overview

The Copper Dusk palette offers a sophisticated and intriguing blend, inspired by the metallic gleam of copper against the rich, deep hues of twilight. Featuring classic #B87333 and a shimmering #C5B358, dramatically contrasted by enigmatic #4B0082, deep #004F4F, and a grounding #36454F, this palette exudes elegance, mystery, and a unique warmth. Designers and developers can leverage these hex codes to create distinctive, high-impact interfaces, luxurious branding, or evocative digital experiences. It's an excellent choice for projects requiring a bold, sophisticated, or artistic aesthetic, offering both traditional warmth and unexpected depth.

Best used for

Luxury event or gala branding
High-end jewelry or watch e-commerce
Artistic portfolio websites
Mysterious or fantasy-themed digital content
Sophisticated nightlife venue branding
Exclusive product launch campaigns

Suggested color roles

primary

Use #4B0082 as a dominant, deep primary for headers, footers, or immersive backgrounds.

secondary

Apply #36454F for secondary content areas, navigation, or subtle textural elements.

accent

Introduce #B87333 as a striking, metallic accent for interactive elements or highlighted content.

background

The deep #004F4F can serve as a sophisticated background for immersive sections.

text

For optimal readability, use crisp white (#FFFFFF) on the darker colors, and a dark charcoal (#333333) on #C5B358.

Accessibility notes

Crucially, use white text on #4B0082, #004F4F, and #36454F to meet WCAG contrast standards.
Ensure sufficient contrast for text on #B87333 and #C5B358; dark text is generally preferred for the latter.
The vibrant contrast between the copper tones and deep purples/greens should be used judiciously for impact, not large text blocks.
Provide clear visual cues for interactive elements, possibly with a subtle glow effect using #C5B358.

Recommended combinations

Dusk Contrast

Excellent for high-impact calls-to-action, striking hero sections, or elegant branding.

#4B0082 · #B87333 · #C5B358

Metallic Gleam

Use for sophisticated accents, subtle gradients, or rich background textures.

#C5B358 · #36454F · #4B0082

Twilight Depths

Ideal for layered backgrounds, immersive UI elements, or artistic illustrations.

#004F4F · #4B0082 · #B87333

CSS variables

:root {
  --copper-dusk-1: #B87333;
  --copper-dusk-2: #C5B358;
  --copper-dusk-3: #4B0082;
  --copper-dusk-4: #004F4F;
  --copper-dusk-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "copper-dusk": {
        1: "#B87333",
        2: "#C5B358",
        3: "#4B0082",
        4: "#004F4F",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#B87333

Color 2#C5B358

Color 3#4B0082

Color 4#004F4F

Color 5#36454F

Accessibility

Contrast checker

1.8:1Fail

3.4:1AA18

2.5:1Fail

2.6:1Fail

1.8:1Fail

6.1:1AA

4.5:1AA18

4.7:1AA

3.4:1AA18

6.1:1AA

1.4:1Fail

1.3:1Fail

2.5:1Fail

4.5:1AA18

1.4:1Fail

1.1:1Fail

2.6:1Fail

4.7:1AA

1.3:1Fail

1.1:1Fail

Similar palettes

More like Copper Dusk

View all warm

Ancient Copper Relic

Ancient Saffron Silk

Calligraphy Gold Leaf

Cozy Spiced Delight

Gilded Age Ballroom

Gilded Baroque Flourish