Palette

Copper Kettle Warmth

Rustic and inviting hues that evoke the cozy glow and aged metallic luster of a vintage copper kettle.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B87333#CD7F32#DAA520#FFD700#F0E68C

Palette guide

How to use Copper Kettle Warmth

Overview

The Copper Kettle Warmth palette is a radiant collection of rustic and inviting hues, evoking the cozy glow and aged metallic luster of a vintage copper kettle. Featuring prominent shades like #B87333 (Copper), #CD7F32 (Bronze), and the brilliant #FFD700 (Gold), this palette offers designers a rich, luminous spectrum. The softer #DAA520 and #F0E68C add subtle warmth and highlight, ensuring versatility. Developers can leverage these hues to create user interfaces that feel opulent yet grounded, ideal for luxury brands with a traditional twist or any project seeking a touch of timeless elegance. This palette's metallic sheen and earthy depth make it perfect for designs that aim to convey quality, heritage, and genuine warmth.

Best used for

luxury brand packaging
vintage jewelry website
high-end interior design accents
traditional restaurant branding
craft beer labels
historical society website

Suggested color roles

primary

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

secondary

#CD7F32 (Bronze) offers a deep, rich complement, perfect for subheadings, secondary content blocks, or sophisticated navigation.

accent

#FFD700 (Gold) delivers a brilliant, luxurious highlight. Use for calls-to-action, important icons, or to draw attention to premium features.

background

#DAA520 (Goldenrod) offers a warm, inviting backdrop that supports content without overpowering the metallic accents.

text

#B87333 (Copper) provides excellent readability against lighter colors. For darker backgrounds, consider white or #F0E68C.

Accessibility notes

Ensure #B87333 text has sufficient contrast against #F0E68C or #DAA520 for optimal readability, meeting WCAG AA standards.
Avoid using #DAA520 and #F0E68C for text and background combinations due to their similar luminosity and hue.
When using #FFD700 for text, reserve it for large headings or decorative elements, as its brightness can challenge readability in small sizes.
Check contrast ratios for all interactive elements, especially when using lighter shades for states or icons.

Recommended combinations

Golden Core

Forms a rich, luxurious, and metallic brand identity, excellent for prestigious logos and primary web sections.

#B87333 · #CD7F32 · #FFD700

Subtle Glow

Creates elegant, luminous backgrounds or soft content areas, evoking a refined and warm atmosphere.

#DAA520 · #FFD700 · #F0E68C

Deep Highlight

Effective for high-impact headlines or calls-to-action, ensuring a strong visual hierarchy with a touch of warmth.

#CD7F32 · #F0E68C · #B87333

CSS variables

:root {
  --copper-kettle-warmth-1: #B87333;
  --copper-kettle-warmth-2: #CD7F32;
  --copper-kettle-warmth-3: #DAA520;
  --copper-kettle-warmth-4: #FFD700;
  --copper-kettle-warmth-5: #F0E68C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "copper-kettle-warmth": {
        1: "#B87333",
        2: "#CD7F32",
        3: "#DAA520",
        4: "#FFD700",
        5: "#F0E68C",
      }
    }
  }
}

Hex values

Color 1#B87333

Color 2#CD7F32

Color 3#DAA520

Color 4#FFD700

Color 5#F0E68C

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.7:1Fail

3:1Fail

1.2:1Fail

1.4:1Fail

2.2:1Fail

2.5:1Fail

1.7:1Fail

1.4:1Fail

1.6:1Fail

1.7:1Fail

2.7:1Fail

2.2:1Fail

1.6:1Fail

1.1:1Fail

3:1Fail

2.5:1Fail

1.7:1Fail

1.1:1Fail

Similar palettes

More like Copper Kettle Warmth

Copper Kettle Warmth

See it in context.

Ready when you are.

Built with Copper Kettle Warmth.

How to use Copper Kettle Warmth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Golden Core

Subtle Glow

Deep Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Copper Kettle Warmth