Back to palettes

Palette

Urban Brick Loft

The rustic charm of exposed brick walls in a stylish, industrial-inspired urban loft.

neutralretro5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#6F4F28#DCDCDC#C0B8B2

Palette guide

How to use Urban Brick Loft

Overview

The Urban Brick Loft palette masterfully blends the rustic charm of exposed brick with sophisticated industrial neutrals. Featuring a rich saddle brown #8B4513, a warm sienna #A0522D, and a deep brown #6F4F28, these earthy tones are beautifully contrasted by the cool light gray #DCDCDC and the soft taupe #C0B8B2. This collection is ideal for designers aiming for a retro, industrial-chic, or cozy modern aesthetic. It provides a balanced array of colors that evoke warmth, authenticity, and a refined urban sensibility, perfect for creating inviting yet stylish digital and physical spaces.

Best used for

  • industrial interior design
  • boutique hotel branding
  • retro-inspired websites
  • artisanal product packaging
  • coffee shop branding
  • modern rustic decor themes

Suggested color roles

primary

#8B4513 makes a strong, inviting primary, ideal for prominent headings or branding elements.

secondary

#6F4F28 provides a deep, grounding secondary, perfect for backgrounds or darker text.

accent

Use #A0522D for a vibrant, warm accent, drawing attention to key features or interactive elements.

background

#DCDCDC offers a clean, bright canvas, while #C0B8B2 provides a softer, warmer base.

text

Dark browns like #6F4F28 or #8B4513 are excellent for text on #DCDCDC or #C0B8B2. White text on darker browns.

Accessibility notes

  • Ensure sufficient contrast between text and background, particularly for lighter grays like #DCDCDC and #C0B8B2.
  • Use darker browns like #6F4F28 for primary text on light backgrounds to maximize legibility.
  • Avoid pairing #DCDCDC with #C0B8B2 for critical text due to low contrast.
  • Always check contrast ratios for all text and interactive elements to meet WCAG guidelines.

Recommended combinations

Rustic Foundation

For creating a strong, warm base with clear contrast for text and prominent elements.

#8B4513 · #DCDCDC · #6F4F28

Soft Industrial

Ideal for backgrounds, subtle UI elements, or adding a delicate yet modern touch.

#C0B8B2 · #DCDCDC · #A0522D

Warm Textures

Creates a rich, cohesive brown gradient, perfect for conveying depth or natural texture.

#6F4F28 · #A0522D · #8B4513

CSS variables

:root {
  --urban-brick-loft-2-1: #8B4513;
  --urban-brick-loft-2-2: #A0522D;
  --urban-brick-loft-2-3: #6F4F28;
  --urban-brick-loft-2-4: #DCDCDC;
  --urban-brick-loft-2-5: #C0B8B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-brick-loft-2": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#6F4F28",
        4: "#DCDCDC",
        5: "#C0B8B2",
      }
    }
  }
}

Related searches

industrial brick paletteurban loft colorsretro neutral schemewarm rustic graysmodern industrial design

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A0522D
·
Color 3#6F4F28
·
Color 4#DCDCDC
·
Color 5#C0B8B2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1:1Fail
5.2:1AA
3.6:1AA18
2
1.3:1Fail
1.3:1Fail
4.1:1AA18
2.9:1Fail
3
1:1Fail
1.3:1Fail
5.4:1AA
3.8:1AA18
4
5.2:1AA
4.1:1AA18
5.4:1AA
1.4:1Fail
5
3.6:1AA18
2.9:1Fail
3.8:1AA18
1.4:1Fail

Similar palettes

More like Urban Brick Loft

View all neutral
Aged Indigo Fabric
Ancient Scroll Parchment
Antique Book Pages
Faded Photograph Memory
Sepia Bound Journal
Vintage Fabric Weave