Back to palettes

Palette

Urban Rust Patina

Gritty and organic, like weathered metal structures aging gracefully in an urban environment.

earthminimal5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#696969#8B4513#CD853F#A0522D

Palette guide

How to use Urban Rust Patina

Overview

The Urban Rust Patina palette offers a gritty yet organic feel, reminiscent of weathered metal structures aging gracefully in an urban environment. Featuring earthy tones like #8B4513 and #A0522D alongside muted greys such as #4F4F4F and #696969, this palette is ideal for designers seeking to evoke a sense of authenticity and rugged charm. The brighter #CD853F provides a striking highlight, perfect for drawing attention to key elements. Developers can utilize this spectrum for backgrounds, textures, and UI accents in applications that require a natural, unrefined aesthetic, creating depth and character.

Best used for

  • Industrial design concepts
  • Website themes with a rugged aesthetic
  • Brand identity for outdoor gear
  • Video game environment textures
  • Interior design for lofts or workshops
  • Packaging design for artisanal products

Suggested color roles

primary

#4F4F4F - A strong, dark grey for main structural elements, providing a stable and serious foundation.

secondary

#A0522D - A rich, earthy brown for secondary sections, large graphic elements, or impactful headings, adding warmth and depth.

accent

#CD853F - A vibrant, warm orange-brown for calls-to-action, highlights, or interactive elements, ensuring visibility.

background

#696969 - A mid-grey that works well as a subtle background, allowing the warmer rust tones to pop effectively.

text

#4F4F4F - Suitable for body text on lighter backgrounds like white or light grey. For darker backgrounds, white or a very light grey is recommended.

Accessibility notes

  • Ensure high contrast when pairing #CD853F with similar mid-tones; use it against #4F4F4F or white.
  • Text in #4F4F4F or #A0522D provides good readability on light backgrounds.
  • Avoid using #696969 for small text on #4F4F4F due to insufficient contrast.
  • Always check color combinations against WCAG guidelines, especially for interactive elements.

Recommended combinations

Gritty Base

Foundation for dark themes, main content areas, or textured backgrounds, providing a robust base.

#4F4F4F · #696969 · #8B4513

Rust Accent

For striking headers, buttons, or infographic elements, bringing warmth and focus against a neutral backdrop.

#8B4513 · #CD853F · #4F4F4F

Weathered Earth

Excellent for layered designs, sub-sections, or to add a natural, aged feel to illustrations or UI components.

#A0522D · #696969 · #CD853F

CSS variables

:root {
  --urban-rust-patina-1: #4F4F4F;
  --urban-rust-patina-2: #696969;
  --urban-rust-patina-3: #8B4513;
  --urban-rust-patina-4: #CD853F;
  --urban-rust-patina-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rust-patina": {
        1: "#4F4F4F",
        2: "#696969",
        3: "#8B4513",
        4: "#CD853F",
        5: "#A0522D",
      }
    }
  }
}

Related searches

weathered steel color paletteurban decay colorsindustrial design paletteearthy grey orangerustic city aesthetic

Palette colors

Hex values

Color 1#4F4F4F
·
Color 2#696969
·
Color 3#8B4513
·
Color 4#CD853F
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.2:1Fail
2.7:1Fail
1.5:1Fail
2
1.5:1Fail
1.3:1Fail
1.8:1Fail
1:1Fail
3
1.2:1Fail
1.3:1Fail
2.4:1Fail
1.3:1Fail
4
2.7:1Fail
1.8:1Fail
2.4:1Fail
1.9:1Fail
5
1.5:1Fail
1:1Fail
1.3:1Fail
1.9:1Fail

Similar palettes

More like Urban Rust Patina

View all earth