Palette

Urban Espresso Blend

Rich, inviting browns and creamy beiges inspired by a perfect cup of espresso in a chic city cafe.

neutralcalm5 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

#362222#523A28#7C5D40#AF805B#E6D2B7

Palette guide

How to use Urban Espresso Blend

Overview

The Urban Espresso Blend palette (ID: urban-espresso-blend-2) is a rich, inviting collection of deep browns and creamy beiges, inspired by the perfect cup of espresso in a chic city cafe. From the intense #362222 to the soft, frothy #E6D2B7, this palette offers a genuinely warm and comforting aesthetic. Developers will find it excellent for crafting engaging digital environments that evoke quality and coziness. Designers can leverage its harmonious blend of dark and light tones, including #523A28 and #7C5D40, to create sophisticated visual narratives, making it ideal for food and beverage brands, luxury goods, or any project seeking an elegant, earthy, and inviting feel.

Best used for

Gourmet coffee and chocolate brands
High-end bakery websites
Cozy cafe mobile apps
Artisanal craft e-commerce
Food blog designs
Warm, inviting portfolio sites

Suggested color roles

primary

#362222 serves as a deep, robust primary color, ideal for main navigation, footers, or strong brand elements.

secondary

#523A28 provides a rich, substantial secondary tone, suitable for important text, section titles, or prominent UI components.

accent

#AF805B is a warm, inviting accent, perfect for calls-to-action, key features, or to add a touch of golden richness.

background

#E6D2B7 offers a creamy, light background that ensures excellent readability and enhances the palette's overall warmth and comfort.

text

For dark text on light backgrounds, use #362222 or #523A28. For light text on dark backgrounds, #E6D2B7 or a crisp white is highly effective.

Accessibility notes

Ensure #362222 text on #E6D2B7 background meets WCAG AA contrast standards; it generally performs well.
Avoid using #7C5D40 or #AF805B for small text on #E6D2B7 backgrounds due to potential low contrast.
Use #E6D2B7 for text on #362222 and #523A28 backgrounds to ensure optimal readability.
Clearly differentiate interactive elements with sufficient contrast or additional visual cues.

Recommended combinations

Rich Coffee Base

Ideal for hero sections or brand headers, combining deep darks with a creamy highlight.

#362222 · #E6D2B7 · #523A28

Warm Layers

Excellent for creating depth in product cards or content sections, offering a gentle, inviting flow.

#E6D2B7 · #7C5D40 · #AF805B

Inviting Interaction

Perfect for primary buttons or calls-to-action, using the warm accent for emphasis.

#AF805B · #362222 · #E6D2B7

CSS variables

:root {
  --urban-espresso-blend-2-1: #362222;
  --urban-espresso-blend-2-2: #523A28;
  --urban-espresso-blend-2-3: #7C5D40;
  --urban-espresso-blend-2-4: #AF805B;
  --urban-espresso-blend-2-5: #E6D2B7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-espresso-blend-2": {
        1: "#362222",
        2: "#523A28",
        3: "#7C5D40",
        4: "#AF805B",
        5: "#E6D2B7",
      }
    }
  }
}

Hex values

Color 1#362222

Color 2#523A28

Color 3#7C5D40

Color 4#AF805B

Color 5#E6D2B7

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

4.3:1AA18

10.1:1AAA

1.4:1Fail

1.8:1Fail

3:1AA18

7.2:1AAA

2.5:1Fail

1.8:1Fail

1.7:1Fail

4.1:1AA18

4.3:1AA18

3:1AA18

1.7:1Fail

2.4:1Fail

10.1:1AAA

7.2:1AAA

4.1:1AA18

2.4:1Fail

Similar palettes

More like Urban Espresso Blend

View all neutral

Coffee Bean Roast

Parisian Cafe Au Lait