Back to palettes

Palette

Urban Alley Mural

Reflects a gritty urban scene brought to life with bold, unexpected pops of colorful street art.

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

#2F3640#7F848C#B0B8C0#F5C75B#E04F52

Palette guide

How to use Urban Alley Mural

Overview

The Urban Alley Mural palette captures the raw energy of cityscapes, blending robust neutrals with striking, energetic accents. Its foundation of deep charcoal #2F3640, balanced by a versatile medium gray #7F848C and a crisp light gray #B0B8C0, provides a sophisticated yet grounded backdrop. This urban base is dramatically enlivened by the vivid pop of golden yellow #F5C75B and an assertive, fiery red #E04F52. Designers can leverage this palette to create dynamic interfaces or branding that evokes a modern, edgy feel. It’s ideal for projects requiring a blend of industrial sophistication and creative, youthful vibrancy, ensuring visual impact.

Best used for

  • Streetwear and urban fashion brand identity.
  • Modern web and mobile application interfaces.
  • Event posters or digital flyers for music festivals or art shows.
  • Contemporary digital art installations or portfolios.
  • Youth-oriented marketing campaigns or product packaging.
  • Dynamic gaming UI elements or character designs.

Suggested color roles

primary

Ideal for dominant backgrounds, large text, or primary structural elements, providing a strong, sophisticated foundation with #2F3640.

secondary

Excellent for dividing sections, secondary information, inactive states, or subtle graphic elements, offering visual breathing room with #7F848C.

accent

Use this bright golden yellow #F5C75B for calls to action, key interactive elements, or striking visual highlights to draw immediate attention. #E04F52 can serve as a powerful secondary accent.

background

A light, neutral gray #B0B8C0 perfect for content areas, cards, or softer backgrounds, ensuring readability and a clean aesthetic.

text

A very dark gray like #2F3640 or pure black on lighter backgrounds, and crisp white or very light gray like #B0B8C0 on dark backgrounds for optimal contrast.

Accessibility notes

  • Ensure sufficient contrast when using #F5C75B or #E04F52 for text on #B0B8C0; larger font sizes might be necessary.
  • Text in #2F3640 offers good readability on #B0B8C0 and #7F848C for body copy and headings.
  • Avoid placing #7F848C text on #B0B8C0 for critical information due to potentially low contrast, especially for smaller fonts.
  • Use the vibrant accents #F5C75B and #E04F52 primarily for interactive elements or icons rather than extensive body text to prevent eye strain.

Recommended combinations

Dynamic Core

Ideal for high-impact headers, calls to action, and clean content areas in modern web design.

#2F3640 · #F5C75B · #B0B8C0

Energetic Contrast

Perfect for creating engaging interfaces or marketing materials that need a strong, vibrant focal point.

#7F848C · #E04F52 · #2F3640

Subtle Depth

Use for background elements, secondary information, and subtle accents to maintain a sophisticated yet lively feel.

#B0B8C0 · #7F848C · #F5C75B

CSS variables

:root {
  --urban-alley-mural-2-1: #2F3640;
  --urban-alley-mural-2-2: #7F848C;
  --urban-alley-mural-2-3: #B0B8C0;
  --urban-alley-mural-2-4: #F5C75B;
  --urban-alley-mural-2-5: #E04F52;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-mural-2": {
        1: "#2F3640",
        2: "#7F848C",
        3: "#B0B8C0",
        4: "#F5C75B",
        5: "#E04F52",
      }
    }
  }
}

Related searches

urban color schemesstreet art palettegraffiti inspired colorsmodern gray yellow red paletteedgy brand colors

Palette colors

Hex values

Color 1#2F3640
·
Color 2#7F848C
·
Color 3#B0B8C0
·
Color 4#F5C75B
·
Color 5#E04F52
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
6.1:1AA
7.7:1AAA
3.1:1AA18
2
3.2:1AA18
1.9:1Fail
2.4:1Fail
1:1Fail
3
6.1:1AA
1.9:1Fail
1.3:1Fail
1.9:1Fail
4
7.7:1AAA
2.4:1Fail
1.3:1Fail
2.4:1Fail
5
3.1:1AA18
1:1Fail
1.9:1Fail
2.4:1Fail

Similar palettes

More like Urban Alley Mural

View all vibrant
City Canvas Pop
Street Art Fusion
Urban Alley Graffiti
Urban Chroma
Urban Graffiti Burst
Urban Street Art