Palette

Fireside Copper Warmth

The deep, burnished glow of copper objects reflecting a cozy fireside warmth.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D1A16C#BB7E4C#A25D38#88422A#6D2B1C

Palette guide

How to use Fireside Copper Warmth

Overview

The Fireside Copper Warmth palette embodies the deep, burnished glow of copper reflecting a cozy fireside. This sophisticated collection provides designers and developers with rich, metallic-inspired browns and oranges, perfect for projects demanding elegance and natural warmth. It features a light copper (#D1A16C), a classic copper tone (#BB7E4C), a rich bronze (#A25D38), a deep burnt sienna (#88422A), and a dark mahogany (#6D2B1C). These hues offer a seamless gradient from shimmering highlights to profound depth, ideal for creating a luxurious and inviting atmosphere.

Best used for

Luxury brand identity and packaging design
High-end interior design and architectural visualizations
Premium product websites and e-commerce stores
Masculine-oriented branding and marketing materials
Editorial layouts for sophisticated magazines
Vintage-inspired graphic design projects

Suggested color roles

primary

Use #A25D38 as a rich, sophisticated primary color for impactful headings, buttons, or brand focal points.

secondary

Apply #88422A for supporting sections, subheadings, or to add a deeper, more grounded dimension to the design.

accent

Deploy #D1A16C for metallic highlights, decorative elements, or interactive components that need a subtle sheen.

background

Utilize #BB7E4C as a warm, inviting base for content, or pair with a light cream (not in palette) for optimal contrast.

text

Choose #6D2B1C for primary body text on lighter backgrounds like #D1A16C, ensuring excellent readability and depth.

Accessibility notes

Ensure high contrast for text, especially when using lighter palette colors like #D1A16C on similar mid-tone backgrounds.
For body text, stick to #6D2B1C on #D1A16C or a very light cream to meet WCAG AA standards.
Use distinct shades for interactive elements to clearly indicate their clickable nature.
Avoid using #D1A16C for small text on #BB7E4C, as contrast may be insufficient for readability.

Recommended combinations

Burnished Elegance

Creates a luxurious, layered look, perfect for hero sections, sophisticated branding, or product displays.

#A25D38 · #D1A16C · #6D2B1C

Deep Copper

Ideal for backgrounds or large content blocks, providing depth and a sense of established luxury.

#88422A · #BB7E4C · #6D2B1C

Metallic Glow

Excellent for highlights, decorative borders, or to add a subtle, shimmering effect to design elements.

#D1A16C · #A25D38 · #BB7E4C

CSS variables

:root {
  --fireside-copper-warmth-1: #D1A16C;
  --fireside-copper-warmth-2: #BB7E4C;
  --fireside-copper-warmth-3: #A25D38;
  --fireside-copper-warmth-4: #88422A;
  --fireside-copper-warmth-5: #6D2B1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fireside-copper-warmth": {
        1: "#D1A16C",
        2: "#BB7E4C",
        3: "#A25D38",
        4: "#88422A",
        5: "#6D2B1C",
      }
    }
  }
}

Hex values

Color 1#D1A16C

Color 2#BB7E4C

Color 3#A25D38

Color 4#88422A

Color 5#6D2B1C

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

3.2:1AA18

4.5:1AA18

1.5:1Fail

2.2:1Fail

3.1:1AA18

2.2:1Fail

1.5:1Fail

2.1:1Fail

3.2:1AA18

2.2:1Fail

1.5:1Fail

1.4:1Fail

4.5:1AA18

3.1:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Fireside Copper Warmth

Fireside Copper Warmth

See it in context.

Ready when you are.

Built with Fireside Copper Warmth.

How to use Fireside Copper Warmth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Burnished Elegance

Deep Copper

Metallic Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fireside Copper Warmth