Palette

Urban Espresso Blend

Rich, deep browns and creamy beiges, inspired by a perfectly brewed cup of espresso in a city cafe.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Espresso Blend 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 Espresso Blend.

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

Data visualization

#36251C#5F4D41#8C7B71#B3A499#D9D0C7

Palette guide

How to use Urban Espresso Blend

Overview

The Urban Espresso Blend palette offers a sophisticated range of deep, comforting browns and creamy neutrals, perfect for creating a warm yet modern aesthetic. Inspired by a perfectly brewed cup of espresso, this collection features the rich, dark #36251C, a versatile mid-tone #5F4D41, and the soft, inviting #D9D0C7. Designers can leverage this palette to evoke a sense of coziness and understated elegance, ideal for brands seeking a refined, approachable feel. Developers will find these hex codes easy to implement across various UI elements, ensuring consistent branding from dark backgrounds to subtle highlights. The blend of deep, earthy tones with lighter, airy shades like #B3A499 provides excellent contrast opportunities for both text and graphical elements, making it highly adaptable for digital and print applications.

Best used for

Cafe branding and interior design
E-commerce websites for artisanal products
Editorial layouts for lifestyle magazines
Packaging for coffee or gourmet food products
Mobile app interfaces with a warm, inviting theme
Branding for luxury hotels or boutique accommodations

Suggested color roles

primary

Use #36251C for dominant elements like navigation bars, footers, or large hero sections, providing a strong, grounded foundation.

secondary

Employ #5F4D41 for subheadings, secondary buttons, or large content blocks, offering a softer yet still rich contrast to the primary.

accent

Apply #8C7B71 sparingly for call-to-action buttons, interactive states, or subtle graphic elements to add warmth without overpowering.

background

Utilize #D9D0C7 as a light, creamy base that provides a clean, inviting canvas for content, ensuring readability and a soft aesthetic.

text

Choose #36251C for body text on light backgrounds like #D9D0C7 for optimal readability and a cohesive, warm look.

Accessibility notes

Ensure sufficient contrast between #36251C text and #D9D0C7 background (WCAG AA compliant).
Avoid using #8C7B71 for small text on #B3A499 as contrast might be insufficient.
For large text, #5F4D41 on #D9D0C7 offers good readability.
Consider a slightly darker text color, like a dark charcoal, if #36251C isn't dark enough for small text on #B3A499.

Recommended combinations

Classic Warmth

A sophisticated trio for main branding, using the deep brown for text, the light beige for backgrounds, and the mid-tone brown for accents.

#36251C · #D9D0C7 · #8C7B71

Muted Elegance

Perfect for softer interfaces or editorial content, pairing a warm mid-brown with light neutrals for a gentle, inviting feel.

#5F4D41 · #B3A499 · #D9D0C7

Rich Depth

Emphasizes depth and contrast, with the darkest brown as primary, a slightly lighter brown for secondary elements, and the lightest for background.

#36251C · #5F4D41 · #D9D0C7

CSS variables

:root {
  --urban-espresso-blend-1: #36251C;
  --urban-espresso-blend-2: #5F4D41;
  --urban-espresso-blend-3: #8C7B71;
  --urban-espresso-blend-4: #B3A499;
  --urban-espresso-blend-5: #D9D0C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-espresso-blend": {
        1: "#36251C",
        2: "#5F4D41",
        3: "#8C7B71",
        4: "#B3A499",
        5: "#D9D0C7",
      }
    }
  }
}

Hex values

Color 1#36251C

Color 2#5F4D41

Color 3#8C7B71

Color 4#B3A499

Color 5#D9D0C7

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

6:1AA

9.6:1AAA

1.8:1Fail

2:1Fail

3.3:1AA18

5.3:1AA

3.6:1AA18

2:1Fail

1.7:1Fail

2.7:1Fail

6:1AA

3.3:1AA18

1.7:1Fail

1.6:1Fail

9.6:1AAA

5.3:1AA

2.7:1Fail

1.6:1Fail

Similar palettes

More like Urban Espresso Blend

View all neutral

Urban Espresso Shot

Concrete Jungle Bloom

Concrete Urbanity Calm

Graphite Urban Grid

Gritty Urban Canvas

Metro Grid Hues