Back to palettes

Palette

Urban Sunset Brick

The warm, ruddy glow of city brickwork illuminated by a low-setting sun, casting a nostalgic urban warmth.

warmretro5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#722619#A6472D#D7764A#F3B58B#451711

Palette guide

How to use Urban Sunset Brick

Overview

The "Urban Sunset Brick" palette evokes the nostalgic warmth of city brickwork bathed in the soft glow of a setting sun. This rich, inviting scheme features a deep, earthy #451711 as its foundation, complemented by the ruddy brick tones of #722619 and #A6472D. A vibrant mid-orange #D7764A adds warmth, while the soft, luminous #F3B58B provides a gentle highlight, mimicking the last rays of light. Ideal for projects seeking a retro yet sophisticated urban feel, this palette creates a cozy and grounded atmosphere that is both timeless and visually appealing for designers and developers.

Best used for

  • Retro branding and packaging
  • Cozy interior design concepts
  • Gaming interfaces (adventure/fantasy)
  • Food & beverage marketing (rustic themes)
  • Autumn-themed digital campaigns
  • Historical narrative websites

Suggested color roles

primary

Use #A6472D for main brand elements, prominent headings, or large blocks of color for a warm, inviting feel.

secondary

Apply #D7764A to supporting elements, call-to-action buttons, or accent panels to draw attention.

accent

Utilize #F3B58B for subtle highlights, small interactive elements, or iconography against darker backgrounds.

background

Employ #451711 for deep, rich backgrounds, footers, or dark mode themes to create depth and contrast.

text

Use #722619 for body text on lighter backgrounds like #F3B58B, or a clean white for text on #451711 or #A6472D.

Accessibility notes

  • Ensure sufficient contrast between #451711 background and lighter text like #F3B58B or white.
  • Text in #722619 might need careful placement on mid-tones such as #D7764A for optimal readability.
  • Avoid using #F3B58B for small text areas without a dark, contrasting background.
  • Always check the contrast of #A6472D against both light and dark elements for legibility.

Recommended combinations

Warm Glow

Gradient or layered elements for a soft, inviting, and warm feel in headers or hero sections.

#F3B58B · #D7764A · #A6472D

Deep Contrast

Ideal for a dark background with readable primary text and a bright highlight for calls to action.

#451711 · #722619 · #F3B58B

Brick & Mortar

Main branding elements, evoking rich brick textures and creating visual depth.

#A6472D · #722619 · #D7764A

CSS variables

:root {
  --urban-sunset-brick-1: #722619;
  --urban-sunset-brick-2: #A6472D;
  --urban-sunset-brick-3: #D7764A;
  --urban-sunset-brick-4: #F3B58B;
  --urban-sunset-brick-5: #451711;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-sunset-brick": {
        1: "#722619",
        2: "#A6472D",
        3: "#D7764A",
        4: "#F3B58B",
        5: "#451711",
      }
    }
  }
}

Related searches

warm urban color schemeretro brick palettesunset orange colorsindustrial warmth designrustic city branding

Palette colors

Hex values

Color 1#722619
·
Color 2#A6472D
·
Color 3#D7764A
·
Color 4#F3B58B
·
Color 5#451711
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.3:1AA18
5.9:1AA
1.5:1Fail
2
1.8:1Fail
1.8:1Fail
3.3:1AA18
2.6:1Fail
3
3.3:1AA18
1.8:1Fail
1.8:1Fail
4.8:1AA
4
5.9:1AA
3.3:1AA18
1.8:1Fail
8.5:1AAA
5
1.5:1Fail
2.6:1Fail
4.8:1AA
8.5:1AAA

Similar palettes

More like Urban Sunset Brick

View all warm