Palette

Urban Rust Echo

A sophisticated blend of cool greys with a subtle hint of weathered, urban textures.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ECF0F1#BDC3C7#7F8C8D#A569BD#8E44AD

Palette guide

How to use Urban Rust Echo

Overview

The Urban Rust Echo palette presents a sophisticated blend of cool greys with a subtle hint of weathered, urban textures, elevated by striking purples. From the airy #ECF0F1 to the grounding #7F8C8D, this palette provides a versatile range of neutrals. The unexpected vibrancy of #A569BD and the deep richness of #8E44AD add a modern, artistic flair, suggesting a touch of aged metallic sheen or a vibrant graffiti accent against a concrete backdrop. This combination is perfect for designers and developers aiming for a minimalist yet expressive aesthetic with a contemporary urban edge.

Best used for

Modern tech interfaces and dashboards
Minimalist or sophisticated branding
Urban fashion and lifestyle websites
Architectural visualization and portfolios
Data visualization with a refined touch
Abstract art or digital installations

Suggested color roles

primary

Use #ECF0F1 as a crisp, clean background or primary content area, providing ample whitespace.

secondary

Employ #BDC3C7 or #7F8C8D for secondary sections, borders, or subtle gradients, adding depth to the neutrals.

accent

Apply #8E44AD or #A569BD generously for calls to action, interactive elements, or striking visual accents.

background

The lightest #ECF0F1 creates a clean, modern canvas, while #BDC3C7 can offer a slightly darker base.

text

For readability, use a dark gray like #7F8C8D or a true black against lighter backgrounds. White text pairs well with #8E44AD.

Accessibility notes

Ensure sufficient contrast for text, especially when using #7F8C8D on #BDC3C7 or #ECF0F1.
The light #ECF0F1 needs dark text (e.g., #7F8C8D or black) for optimal readability.
The vibrant purples #A569BD and #8E44AD require light-colored text (e.g., white or #ECF0F1) to meet contrast standards.
Avoid using light gray text on light gray backgrounds; always ensure a minimum contrast ratio of 4.5:1 for body text.

Recommended combinations

Clean & Bold

Establishes a crisp, clean base with a powerful purple accent and a grounding dark gray for text or detail.

#ECF0F1 · #8E44AD · #7F8C8D

Subtle Depth

Combines mid-tone gray with a softer purple highlight, ideal for sophisticated, layered designs.

#BDC3C7 · #A569BD · #ECF0F1

Urban Edge

Creates a modern, slightly moody feel with a strong purple pop against darker, cool neutrals.

#7F8C8D · #8E44AD · #BDC3C7

CSS variables

:root {
  --urban-rust-echo-1: #ECF0F1;
  --urban-rust-echo-2: #BDC3C7;
  --urban-rust-echo-3: #7F8C8D;
  --urban-rust-echo-4: #A569BD;
  --urban-rust-echo-5: #8E44AD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-echo": {
        1: "#ECF0F1",
        2: "#BDC3C7",
        3: "#7F8C8D",
        4: "#A569BD",
        5: "#8E44AD",
      }
    }
  }
}

Hex values

Color 1#ECF0F1

Color 2#BDC3C7

Color 3#7F8C8D

Color 4#A569BD

Color 5#8E44AD

Accessibility

Contrast checker

1.6:1Fail

3:1AA18

3.4:1AA18

5.1:1AA

1.6:1Fail

2:1Fail

2.2:1Fail

3.3:1AA18

3:1AA18

2:1Fail

1.1:1Fail

1.7:1Fail

3.4:1AA18

2.2:1Fail

1.1:1Fail

1.5:1Fail

5.1:1AA

3.3:1AA18

1.7:1Fail

1.5:1Fail

Similar palettes

More like Urban Rust Echo

Industrial Loft Concrete

Industrial Loft Edge