Back to palettes

Palette

Urban Espresso Bar

Sophisticated darks and warm browns capturing the refined ambiance of a modern espresso bar.

DarkElegant5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#2F4F4F#8B4513#696969#D2B48C

Palette guide

How to use Urban Espresso Bar

Overview

The Urban Espresso Bar palette (ID: urban-espresso-bar-2) is a sophisticated blend of deep, muted blues and grays, punctuated by warm, inviting browns. Featuring the dark, grounding #36454F and the rich, earthy #8B4513, this collection evokes the refined ambiance of a modern cafe. The creamy #D2B48C provides a perfect contrasting highlight, reminiscent of frothy milk. Developers can use this palette to create elegant and cozy digital environments. Designers will find its balance of cool darks and warm accents ideal for projects seeking a blend of professionalism and comfort, perfect for hospitality, lifestyle, or bespoke product branding.

Best used for

  • Coffee shop and cafe websites
  • Boutique hotel branding
  • Gourmet food and beverage e-commerce
  • Interior design inspiration sites
  • Modern lifestyle blogs
  • Elegant mobile app interfaces

Suggested color roles

primary

#36454F serves as a deep, sophisticated primary color, ideal for main navigation, footers, or robust background sections.

secondary

#2F4F4F offers a slightly warmer dark tone, suitable for secondary content blocks, subheadings, or subtle background textures.

accent

#8B4513 is the warm, inviting accent, perfect for calls-to-action, key features, or to infuse a sense of comfort and richness.

background

#D2B48C provides a creamy, light background that offers excellent readability and enhances the palette's warmth.

text

For dark text on light backgrounds, use #36454F or #2F4F4F. For light text on dark backgrounds, #D2B48C or a crisp white is highly effective.

Accessibility notes

  • Ensure #36454F text on #D2B48C background meets WCAG AA contrast standards.
  • #8B4513 as text on #D2B48C might require larger font sizes or bolder weights to pass contrast checks.
  • Use #D2B48C for text on darker shades like #36454F, #2F4F4F, or #696969 for optimal readability.
  • Clearly differentiate interactive elements through sufficient color contrast or alternative visual cues.

Recommended combinations

Cozy Contrast

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

#36454F · #D2B48C · #8B4513

Refined Textures

Excellent for content cards or testimonials, creating depth with subtle gray variations.

#D2B48C · #696969 · #2F4F4F

Warm Interaction

Perfect for primary buttons or calls-to-action, using the accent color for impact.

#8B4513 · #36454F · #D2B48C

CSS variables

:root {
  --urban-espresso-bar-2-1: #36454F;
  --urban-espresso-bar-2-2: #2F4F4F;
  --urban-espresso-bar-2-3: #8B4513;
  --urban-espresso-bar-2-4: #696969;
  --urban-espresso-bar-2-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-espresso-bar-2": {
        1: "#36454F",
        2: "#2F4F4F",
        3: "#8B4513",
        4: "#696969",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

espresso bar color schemesophisticated cafe palettedark blue brown colorselegant warm neutralsmodern hospitality design

Palette colors

Hex values

Color 1#36454F
·
Color 2#2F4F4F
·
Color 3#8B4513
·
Color 4#696969
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.8:1Fail
5:1AA
2
1.1:1Fail
1.3:1Fail
1.6:1Fail
4.5:1AA
3
1.4:1Fail
1.3:1Fail
1.3:1Fail
3.6:1AA18
4
1.8:1Fail
1.6:1Fail
1.3:1Fail
2.8:1Fail
5
5:1AA
4.5:1AA
3.6:1AA18
2.8:1Fail

Similar palettes

More like Urban Espresso Bar

View all Dark
Velvet Cacao Dreams
Amethyst Star Cluster
Art Deco Bronze
Art Deco Sapphire
Aurora Borealis Dream
Baroque Night Grandeur