Back to palettes

Palette

Urban Brick Hues

Earthy reds and browns inspired by the classic texture and robust colors of urban brickwork.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A52A2A#B22222#D2691E#CD5C5C

Palette guide

How to use Urban Brick Hues

Overview

The Urban Brick Hues palette embodies the timeless warmth and robust character of classic brickwork, offering a rich spectrum of earthy reds and browns. From the deep saddle brown #8B4513 to the vibrant brick red #B22222 and the softer Indian red #CD5C5C, this collection is grounded by the burnt orange #D2691E and the strong brown #A52A2A. Designers can leverage these hues to create a sense of heritage, comfort, and authenticity. This palette is perfect for projects seeking a traditional, rustic, or inviting aesthetic, adding a touch of enduring charm and natural warmth to any visual communication.

Best used for

  • traditional branding
  • heritage product packaging
  • restaurant interiors
  • real estate marketing
  • historical society websites
  • cozy home decor themes

Suggested color roles

primary

#B22222 makes a strong, traditional primary color, signaling warmth and reliability for headings or key elements.

secondary

#8B4513 provides a deep, grounding secondary, excellent for backgrounds or supporting text.

accent

Use #D2691E for a brighter, more inviting accent, perfect for calls to action or highlights.

background

A very light cream or off-white would beautifully complement these warm tones. #CD5C5C can also serve as a softer background.

text

Dark brown or black text for lighter backgrounds. White or light cream text on #8B4513, #A52A2A, or #B22222.

Accessibility notes

  • Ensure high contrast for text; white or light cream text is recommended on darker brick reds.
  • Avoid placing lighter brick shades (e.g., #CD5C5C) on similarly light backgrounds for text.
  • Use sufficient contrast when pairing #D2691E with other reds to ensure readability.
  • Always check WCAG contrast guidelines for all text and interactive elements.

Recommended combinations

Classic Brick

For traditional branding, backgrounds with depth, or creating a warm, inviting feel.

#B22222 · #8B4513 · #D2691E

Warm Accent

Ideal for softer elements, subheadings, or adding a gentle, rustic touch.

#CD5C5C · #A52A2A · #B22222

Rich Harmony

Creates a cohesive, earthy gradient perfect for illustrative elements or subtle UI textures.

#8B4513 · #D2691E · #CD5C5C

CSS variables

:root {
  --urban-brick-hues-1: #8B4513;
  --urban-brick-hues-2: #A52A2A;
  --urban-brick-hues-3: #B22222;
  --urban-brick-hues-4: #D2691E;
  --urban-brick-hues-5: #CD5C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-brick-hues": {
        1: "#8B4513",
        2: "#A52A2A",
        3: "#B22222",
        4: "#D2691E",
        5: "#CD5C5C",
      }
    }
  }
}

Related searches

red brick color paletteearthy warm tonesrustic city colorstraditional building huesheritage brand colors

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A52A2A
·
Color 3#B22222
·
Color 4#D2691E
·
Color 5#CD5C5C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
2:1Fail
1.8:1Fail
2
1:1Fail
1.1:1Fail
1.9:1Fail
1.8:1Fail
3
1.1:1Fail
1.1:1Fail
1.8:1Fail
1.7:1Fail
4
2:1Fail
1.9:1Fail
1.8:1Fail
1.1:1Fail
5
1.8:1Fail
1.8:1Fail
1.7:1Fail
1.1:1Fail

Similar palettes

More like Urban Brick Hues

View all earth