Palette

Copper Ore Vein

Grounded tones inspired by raw copper ore and deep geological veins, rich and robust.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B87333#CD7F32#FFDAB9#8B4513#5C4033

Palette guide

How to use Copper Ore Vein

Overview

The Copper Ore Vein palette offers grounded tones inspired by raw copper ore and deep geological veins, providing a rich and robust foundation for design. With prominent shades like #B87333 (Copper) and #CD7F32 (Bronze), balanced by the deep #8B4513 (Saddle Brown) and #5C4033 (Dark Earth), this palette exudes natural strength. The bright #FFDAB9 (Peach Puff) provides a surprising, delicate contrast, mimicking the subtle gleam within raw minerals. Developers can utilize these hues to create user interfaces that feel authentic, industrial, and deeply rooted, ideal for brands emphasizing durability, craftsmanship, or natural resources. This palette is perfect for projects seeking a rugged yet refined aesthetic, offering a powerful blend of metallic warmth and earthy depth.

Best used for

industrial design branding
craftsman workshop website
mining company corporate identity
earthy product packaging
rugged outdoor gear marketing
heritage brand storytelling

Suggested color roles

primary

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

secondary

#CD7F32 (Bronze) offers a slightly deeper, rich complement, suitable for subheadings, secondary content blocks, or navigation.

accent

#FFDAB9 (Peach Puff) provides a soft, luminous highlight. Use sparingly for delicate icons, hover states, or to add a touch of subtle sheen.

background

#8B4513 (Saddle Brown) offers a deep, earthy background, grounding content and providing excellent contrast for lighter elements.

text

#FFDAB9 (Peach Puff) offers excellent readability against the darker shades like #8B4513 or #5C4033. For lighter backgrounds, use black or #5C4033.

Accessibility notes

Ensure #FFDAB9 text has high contrast against #8B4513 or #5C4033 for optimal readability, meeting WCAG AA standards.
Avoid using #B87333 and #CD7F32 for text and background combinations due to their similar luminosity.
When using #FFDAB9 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 Core

Creates a robust, grounded, and masculine brand identity, excellent for industrial logos and primary web sections.

#8B4513 · #5C4033 · #B87333

Mineral Gleam

Ideal for highlighting metallic accents or creating a sense of natural shimmer within content areas.

#B87333 · #CD7F32 · #FFDAB9

Deep Contrast

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

#5C4033 · #FFDAB9 · #8B4513

CSS variables

:root {
  --copper-ore-vein-1: #B87333;
  --copper-ore-vein-2: #CD7F32;
  --copper-ore-vein-3: #FFDAB9;
  --copper-ore-vein-4: #8B4513;
  --copper-ore-vein-5: #5C4033;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "copper-ore-vein": {
        1: "#B87333",
        2: "#CD7F32",
        3: "#FFDAB9",
        4: "#8B4513",
        5: "#5C4033",
      }
    }
  }
}

Hex values

Color 1#B87333

Color 2#CD7F32

Color 3#FFDAB9

Color 4#8B4513

Color 5#5C4033

Accessibility

Contrast checker

1.2:1Fail

2.9:1Fail

1.9:1Fail

2.5:1Fail

1.2:1Fail

2.4:1Fail

2.3:1Fail

3:1Fail