Back to palettes

Palette

Urban Brick Alley

Captures the gritty texture and aged warmth of a hidden alleyway with crumbling brick walls.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#36454F#C45B3E#F8F8F8#2F4F4F

Palette guide

How to use Urban Brick Alley

Overview

The Urban Brick Alley palette captures the raw, atmospheric essence of forgotten city spaces, blending deep, earthy tones with a stark contrast. Featuring a rich dark red #8B0000, a deep charcoal #36454F, a warm terracotta #C45B3E, a crisp near-white #F8F8F8, and a dark slate gray #2F4F4F, this collection offers a balanced blend of rustic and industrial. Designers can evoke a sense of history and grit, perfect for projects needing an authentic, vintage, or grunge aesthetic. This palette is versatile for creating visual depth and strong focal points, whether in digital or print applications.

Best used for

  • vintage branding
  • grunge design themes
  • coffee shop interiors
  • historical documentaries
  • craft beer labels
  • industrial-chic websites

Suggested color roles

primary

#8B0000 serves as a strong, earthy primary, ideal for headlines or elements demanding warmth and presence.

secondary

#36454F provides a deep, grounding secondary, perfect for backgrounds or dominant text.

accent

#C45B3E offers a warmer, more vibrant accent for highlights or to draw attention to specific details.

background

#F8F8F8 provides a clean, bright canvas, while #36454F offers a dramatic, rich alternative.

text

#36454F or #2F4F4F against #F8F8F8 for optimal readability. White text on #8B0000 or #36454F.

Accessibility notes

  • Ensure high contrast when placing #C45B3E on #F8F8F8; consider darkening the text for readability.
  • Use #36454F or black for text on #F8F8F8 to ensure legibility.
  • Avoid using #8B0000 for small text against similarly dark backgrounds without sufficient contrast.
  • Always check contrast ratios for all critical text and interactive elements to meet WCAG guidelines.

Recommended combinations

Rustic Contrast

For striking headlines, strong branding, or creating a balanced, high-contrast visual.

#8B0000 · #F8F8F8 · #36454F

Industrial Depth

Ideal for backgrounds, textured elements, or adding a sophisticated, gritty layering effect.

#36454F · #2F4F4F · #C45B3E

Warm Accent

Use for clean body text on a bright background, with a warm, inviting accent for highlights.

#F8F8F8 · #C45B3E · #2F4F4F

CSS variables

:root {
  --urban-brick-alley-1: #8B0000;
  --urban-brick-alley-2: #36454F;
  --urban-brick-alley-3: #C45B3E;
  --urban-brick-alley-4: #F8F8F8;
  --urban-brick-alley-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-brick-alley": {
        1: "#8B0000",
        2: "#36454F",
        3: "#C45B3E",
        4: "#F8F8F8",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

gritty urban palettebrick and mortar colorsindustrial rustic schemevintage city designearthy dark palette

Palette colors

Hex values

Color 1#8B0000
·
Color 2#36454F
·
Color 3#C45B3E
·
Color 4#F8F8F8
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
2.3:1Fail
9.4:1AAA
1.1:1Fail
2
1:1Fail
2.3:1Fail
9.3:1AAA
1.1:1Fail
3
2.3:1Fail
2.3:1Fail
4:1AA18
2.1:1Fail
4
9.4:1AAA
9.3:1AAA
4:1AA18
8.4:1AAA
5
1.1:1Fail
1.1:1Fail
2.1:1Fail
8.4:1AAA

Similar palettes

More like Urban Brick Alley

View all earth
Antique Map Parchment
Cartographer's Parchment
Copper Ore Vein
Desert Pot Shards
Patina Relic Trace
Urban Brick Hues