Palette

Urban Canyon Rust

Rich, worn tones found in aged metal and industrial structures, mirroring an urban canyon.

earthretro5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Canyon Rust 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 Urban Canyon Rust.

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

Data visualization

#7A3B1F#A8553B#D97E5B#4E2A1A#B37559

Palette guide

How to use Urban Canyon Rust

Overview

The "Urban Canyon Rust" palette (version 1) delves into rich, worn tones reminiscent of aged metal and industrial structures, reflecting an urban canyon's raw aesthetic. This earthy palette features a dominant #4E2A1A (Dark Reddish Brown) as its deepest tone, complemented by vibrant #7A3B1F (Rust Red) and #A8553B (Burnt Orange). Lighter, softer tones like #B37559 (Terracotta) and #D97E5B (Warm Peach) complete the scheme, offering a balanced blend of intensity and warmth. Ideal for designs seeking a retro, robust, or authentic feel, this palette excels in conveying history, strength, and a touch of rustic charm, perfect for heritage brands or artisanal products.

Best used for

Vintage or retro-themed branding
Craft breweries or artisanal food packaging
Outdoor adventure and rugged lifestyle brands
Industrial design product showcases
Autumnal event promotions
E-commerce sites for handcrafted goods

Suggested color roles

primary

#4E2A1A (Dark Reddish Brown) - Serves as a strong, grounding color for main elements, footers, or background panels, conveying stability.

secondary

#7A3B1F (Rust Red) - Excellent for subheadings, navigation, or larger content blocks, providing warmth and depth.

accent

#A8553B (Burnt Orange) - A vibrant accent ideal for call-to-action buttons, key highlights, or interactive elements, drawing immediate attention.

background

#D97E5B (Warm Peach) - A light, inviting background that ensures good readability for darker text and offers a friendly, approachable feel.

text

#4E2A1A (Dark Reddish Brown) for dark text on lighter backgrounds, or a cream white like #FBFBFB for text on #4E2A1A, #7A3B1F, or #A8553B.

Accessibility notes

Ensure #A8553B or #B37559 has sufficient contrast when used for text against #D97E5B.
Prioritize #4E2A1A for critical text on lighter backgrounds like #D97E5B for maximum readability.
Avoid using #B37559 for small text on backgrounds such as #A8553B due to potential low contrast.
Always test color pairings for WCAG compliance, especially for interactive elements.

Recommended combinations

Aged Industrial

Creates a rich, layered effect for headers or hero images, evoking depth and history.

#4E2A1A · #7A3B1F · #A8553B

Warm Earth

Ideal for soft backgrounds or content cards, providing a cohesive and inviting warm feel.

#B37559 · #D97E5B · #7A3B1F

Rustic Highlight

Use for clear call-to-actions or important notifications, contrasting deep brown with bright, warm accents.

#4E2A1A · #D97E5B · #A8553B

CSS variables

:root {
  --urban-canyon-rust-1: #7A3B1F;
  --urban-canyon-rust-2: #A8553B;
  --urban-canyon-rust-3: #D97E5B;
  --urban-canyon-rust-4: #4E2A1A;
  --urban-canyon-rust-5: #B37559;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-canyon-rust": {
        1: "#7A3B1F",
        2: "#A8553B",
        3: "#D97E5B",
        4: "#4E2A1A",
        5: "#B37559",
      }
    }
  }
}

Hex values

Color 1#7A3B1F

Color 2#A8553B

Color 3#D97E5B

Color 4#4E2A1A

Color 5#B37559

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

1.5:1Fail

2.3:1Fail

1.6:1Fail

1.8:1Fail

2.4:1Fail

1.4:1Fail

2.9:1Fail

1.8:1Fail

4.2:1AA18

1.3:1Fail

1.5:1Fail

2.4:1Fail

4.2:1AA18

3.4:1AA18

2.3:1Fail

1.4:1Fail

1.3:1Fail

3.4:1AA18

Similar palettes

More like Urban Canyon Rust