Palette

Urban Grunge Art

A raw and authentic palette mirroring the textures and accidental beauty of street art and urban decay.

neutraldark5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Grunge Art 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 Grunge Art.

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

Data visualization

#A9A9A9#D2691E#2F4F4F#8B0000#F5F5DC

Palette guide

How to use Urban Grunge Art

Overview

The Urban Grunge Art palette, a raw and authentic collection, captures the essence of street art and urban decay. Featuring a deep #2F4F4F (Dark Slate Gray) and a grounding #A9A9A9 (Dark Gray), it balances these with the vibrant, rust-like #D2691E (Rust) and a strong #8B0000 (Dark Red). A soft #F5F5DC (Beige) provides a worn, concrete-like backdrop, perfect for designs requiring a gritty, distressed, or industrial aesthetic. This palette is ideal for evoking a sense of history, rawness, and artistic rebellion, making it a powerful choice for impactful visual communication across various digital and print mediums.

Best used for

Streetwear fashion brands and e-commerce
Indie game UI/UX design with a gritty aesthetic
Music album art for rock, alternative, or hip-hop genres
Industrial design portfolios and websites
Urban photography blogs and galleries
Edgy editorial layouts and magazine covers

Suggested color roles

primary

Use #2F4F4F (Dark Slate Gray) to establish a deep, moody foundation for main sections, large blocks, or primary branding elements, conveying strength and seriousness.

secondary

Employ #A9A9A9 (Dark Gray) as a neutral, concrete-like balance for subheadings, borders, secondary content areas, or subtle background textures, adding depth without overpowering.

accent

Apply #D2691E (Rust) to deliver a striking, worn pop of color, ideal for calls-to-action, interactive elements, or distressed graphic details, grabbing attention with an aged feel.

background

Utilize #F5F5DC (Beige) as a light, aged canvas, reminiscent of worn paper or concrete, allowing darker elements and text to stand out clearly and providing a vintage base.

text

Choose #2F4F4F (Dark Slate Gray) for body copy on lighter backgrounds like #F5F5DC, ensuring strong readability. For headings or key statements on dark backgrounds, #F5F5DC offers excellent contrast.

Accessibility notes

Ensure text in #2F4F4F on a #F5F5DC background meets WCAG AAA contrast ratios for optimal readability across all devices.
Carefully check the contrast of #D2691E (Rust) or #8B0000 (Dark Red) when used for text against darker backgrounds like #2F4F4F, as legibility may be compromised.
Avoid placing #8B0000 text directly on #D2691E backgrounds, or vice versa, due to insufficient color contrast and potential visual discomfort.
For strong visual accessibility, use #F5F5DC for text on the darkest colors in the palette, specifically #2F4F4F and #8B0000.

Recommended combinations

Gritty Foundation

Ideal for establishing a robust, industrial base in UI backgrounds and primary content areas, offering a solid and grounded feel.

#2F4F4F · #A9A9A9 · #F5F5DC

Urban Edge

Creates a dynamic, distressed look, excellent for highlighting interactive elements, artistic overlays, or conveying urgency and impact.

#A9A9A9 · #D2691E · #8B0000

Worn Contrast

Provides clear contrast with a touch of rust, suitable for readable text blocks and accenting key information on a lighter, aged canvas.

#F5F5DC · #2F4F4F · #D2691E

CSS variables

:root {
  --urban-grunge-art-1: #A9A9A9;
  --urban-grunge-art-2: #D2691E;
  --urban-grunge-art-3: #2F4F4F;
  --urban-grunge-art-4: #8B0000;
  --urban-grunge-art-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grunge-art": {
        1: "#A9A9A9",
        2: "#D2691E",
        3: "#2F4F4F",
        4: "#8B0000",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#D2691E

Color 3#2F4F4F

Color 4#8B0000

Color 5#F5F5DC

Accessibility

Contrast checker

1.5:1Fail

3.8:1AA18

4.3:1AA18

2.1:1Fail

1.5:1Fail

2.5:1Fail

2.8:1Fail

3.3:1AA18

3.8:1AA18

2.5:1Fail

1.1:1Fail

8.1:1AAA

4.3:1AA18

2.8:1Fail

1.1:1Fail

9:1AAA

2.1:1Fail

3.3:1AA18

8.1:1AAA

9:1AAA

Similar palettes

More like Urban Grunge Art