Palette

Urban Alley Mural

A gritty yet artistic palette inspired by the raw, expressive colors of street murals.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Alley Mural 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 Alley Mural.

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

Data visualization

#2A2A2A#6D323A#8F644A#4A6E62#A29F9E

Palette guide

How to use Urban Alley Mural

Overview

The Urban Alley Mural palette captures the raw energy and expressive nature of street art, blending gritty sophistication with bold accents. Featuring a versatile foundation of Dark Charcoal (#2A2A2A) and Stone Grey (#A29F9E), it introduces compelling depth through Deep Maroon (#6D323A), Burnt Orange (#8F644A), and Muted Teal (#4A6E62). This collection is ideal for projects seeking a contemporary, urban edge without sacrificing artistic nuance. Designers can leverage its moody yet vibrant spectrum to evoke a sense of authenticity and a dynamic, street-inspired aesthetic. It’s perfect for creating designs that feel both grounded and strikingly individual.

Best used for

Branding for alternative fashion or lifestyle brands
Urban-themed video game environments or UI
Editorial design for music, art, or counter-culture publications
Event promotion for concerts, festivals, or art exhibitions
Gritty or industrial web design interfaces
Digital illustrations and graphic novel art

Suggested color roles

primary

#2A2A2A (Dark Charcoal). Serves as a strong, grounding base, perfect for backgrounds, main text, or dominant structural elements. It provides depth and a sophisticated, modern edge.

secondary

#6D323A (Deep Maroon). Use this rich, assertive hue for calls-to-action, section headers, or significant graphical elements to add a bold, energetic contrast without overwhelming the design.

accent

#8F644A (Burnt Orange). Apply this warm, earthy tone sparingly to draw attention to interactive elements, subtle highlights, or illustrative details, offering a pop of inviting warmth.

background

#A29F9E (Stone Grey). A lighter, neutral background option that provides excellent readability for darker text, or #2A2A2A for a moodier, immersive backdrop.

text

#A29F9E (Stone Grey) for light text on dark backgrounds like #2A2A2A. For dark text on lighter backgrounds, a near-black like #2A2A2A offers strong contrast and readability.

Accessibility notes

Ensure sufficient contrast when pairing #A29F9E (Stone Grey) text on lighter backgrounds; it may require larger font sizes for legibility.
The dark primary #2A2A2A offers excellent contrast for lighter text, such as white or #A29F9E, ensuring readability.
Avoid using #6D323A (Deep Maroon) or #4A6E62 (Muted Teal) as primary text colors on dark backgrounds without careful contrast checking.
Always test color combinations like #8F644A (Burnt Orange) on #6D323A (Deep Maroon) for sufficient legibility, especially for smaller text or interactive elements.

Recommended combinations

Gritty Foundation

Ideal for bold branding, website footers, or dark mode interfaces where #2A2A2A is the background, #A29F9E is text, and #6D323A highlights key elements.

#2A2A2A · #6D323A · #A29F9E

Urban Pop

Suitable for clean, yet edgy editorial layouts or product showcases. #A29F9E as a background, #2A2A2A for text, and #8F644A for impactful calls-to-action.

#A29F9E · #8F644A · #2A2A2A

Muted Contrast

Excellent for illustrations or UI elements requiring a sophisticated, slightly desaturated feel. #4A6E62 as a base, #6D323A for depth, and #A29F9E for subtle accents or text.

#4A6E62 · #6D323A · #A29F9E

CSS variables

:root {
  --urban-alley-mural-1: #2A2A2A;
  --urban-alley-mural-2: #6D323A;
  --urban-alley-mural-3: #8F644A;
  --urban-alley-mural-4: #4A6E62;
  --urban-alley-mural-5: #A29F9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-mural": {
        1: "#2A2A2A",
        2: "#6D323A",
        3: "#8F644A",
        4: "#4A6E62",
        5: "#A29F9E",
      }
    }
  }
}

Hex values

Color 1#2A2A2A

Color 2#6D323A

Color 3#8F644A

Color 4#4A6E62

Color 5#A29F9E

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

2.5:1Fail

5.5:1AA

1.5:1Fail

1.9:1Fail

1.7:1Fail

3.7:1AA18

2.8:1Fail

1.9:1Fail

1.1:1Fail

2:1Fail

2.5:1Fail

1.7:1Fail

1.1:1Fail

2.2:1Fail

5.5:1AA

3.7:1AA18

2:1Fail

2.2:1Fail

Similar palettes

More like Urban Alley Mural