Palette

Urban Brick Loft

Inspired by the rustic charm of exposed brick walls in a renovated urban loft apartment.

earthelegant5 colors

More earth 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

#A85A48#D1897C#EED7CB#734F47#4F3836

Palette guide

How to use Urban Brick Loft

Overview

The Urban Brick Loft palette captures the rustic elegance of renovated industrial spaces. Its warm, earthy tones, like the deep terracotta of #A85A48 and the rich umber of #734F47, evoke exposed brick and aged wood. Complemented by the lighter, softer hues of #D1897C and the creamy neutral #EED7CB, this palette offers designers and developers a sophisticated foundation for creating inviting, modern-industrial aesthetics. The darkest shade, #4F3836, provides excellent contrast for typography, ensuring readability while maintaining the palette's cohesive, warm character. It's ideal for projects aiming for a cozy yet refined urban feel.

Best used for

Interior design visualization
Restaurant or cafe branding
E-commerce sites for artisanal goods
Mobile app interfaces with a vintage touch
Editorial design for lifestyle magazines
Architectural renders of loft conversions

Suggested color roles

primary

Use #A85A48 as a dominant color for large sections or headers, representing a classic brick tone.

secondary

Employ #734F47 for secondary elements, borders, or deeper textural accents, mimicking dark wood or iron.

accent

Apply #D1897C for highlights, call-to-action buttons, or subtle graphic elements to add warmth and visual interest.

background

Utilize #EED7CB as a clean, warm background, reminiscent of plaster or light-washed walls, ensuring good readability.

text

Set primary text in #4F3836 for optimal contrast against lighter backgrounds and a cohesive, elegant feel.

Accessibility notes

Ensure sufficient contrast between #4F3836 text and #EED7CB backgrounds for readability (AA/AAA compliant).
Avoid using #D1897C for small text on #EED7CB backgrounds due to potential low contrast.
Pair #A85A48 or #734F47 with lighter text (e.g., #EED7CB or white) for accessibility on dark elements.
Test color combinations with accessibility checkers to meet WCAG guidelines for all users.

Recommended combinations

Rustic Elegance

Ideal for main content areas, combining a strong primary with a light background and dark text.

#A85A48 · #EED7CB · #4F3836

Loft Comfort

Excellent for secondary sections, giving depth with a warm accent against a soft base.

#734F47 · #D1897C · #EED7CB

Deep Industrial

Use for headers, footers, or navigation to create a strong, grounded, and sophisticated presence.

#4F3836 · #A85A48 · #734F47

CSS variables

:root {
  --urban-brick-loft-1: #A85A48;
  --urban-brick-loft-2: #D1897C;
  --urban-brick-loft-3: #EED7CB;
  --urban-brick-loft-4: #734F47;
  --urban-brick-loft-5: #4F3836;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-brick-loft": {
        1: "#A85A48",
        2: "#D1897C",
        3: "#EED7CB",
        4: "#734F47",
        5: "#4F3836",
      }
    }
  }
}

Hex values

Color 1#A85A48

Color 2#D1897C

Color 3#EED7CB

Color 4#734F47

Color 5#4F3836

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

1.4:1Fail

2.2:1Fail

1.8:1Fail

2:1Fail

2.6:1Fail

3.9:1AA18

3.6:1AA18

2:1Fail

5.2:1AA

7.8:1AAA

1.4:1Fail

2.6:1Fail

5.2:1AA

1.5:1Fail

2.2:1Fail

3.9:1AA18

7.8:1AAA

1.5:1Fail

Similar palettes

More like Urban Brick Loft

View all earth

Aged Copper Patina

Ambergris Dream

Ancient Desert Fresco

Golden Teak Deck

Vicuna Wool

Whiskey Barrel Aged