Back to palettes

Palette

Urban Espresso Bar

Sophisticated browns and grays reflecting the chic, cozy atmosphere of a city espresso bar.

neutralelegant5 colors
More neutral 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

#362D2C#5C4B4D#7E6E6C#9E908F#C8BDBA

Palette guide

How to use Urban Espresso Bar

Overview

The Urban Espresso Bar palette (ID: urban-espresso-bar) is a sophisticated collection of deep, inviting browns and warm grays, perfectly capturing the chic, cozy atmosphere of a city cafe. Ranging from the rich, dark #362D2C to the creamy #C8BDBA, this palette offers a harmonious blend of earthy tones. Developers will find it excellent for building elegant and comforting digital experiences. Designers can leverage its subtle gradations, including #5C4B4D and #7E6E6C, to create a sense of depth and warmth, making it ideal for brands that prioritize refined comfort, artisanal quality, and a welcoming yet upscale aesthetic.

Best used for

  • Coffee and tea brand websites
  • Artisan product showcases
  • Luxury lifestyle magazines
  • Cozy blog designs
  • High-end furniture e-commerce
  • Boutique service websites

Suggested color roles

primary

#362D2C serves as a deep, anchoring primary color, ideal for headers, navigation, or strong brand elements.

secondary

#5C4B4D provides a substantial secondary tone, suitable for important text, section titles, or robust UI components.

accent

#7E6E6C can be used for subtle interactive states, borders, or to highlight secondary information, maintaining the palette's warmth.

background

#C8BDBA offers a creamy, light background that ensures excellent readability for darker text and enhances the cozy feel.

text

For dark text on light backgrounds, use #362D2C or #5C4B4D. For light text on dark backgrounds, #C8BDBA or a crisp white is highly effective.

Accessibility notes

  • Ensure #362D2C text on #C8BDBA background meets WCAG AA contrast standards; it generally performs well.
  • Avoid using #9E908F or #7E6E6C for small text on #C8BDBA backgrounds due to potential low contrast.
  • Use #C8BDBA for text on #362D2C and #5C4B4D backgrounds to ensure optimal readability.
  • Differentiate interactive elements with sufficient contrast or additional visual cues.

Recommended combinations

Rich Foundation

Ideal for main layouts, providing a deep, sophisticated anchor with a bright, readable content area.

#362D2C · #C8BDBA · #5C4B4D

Warm Layers

Excellent for creating depth in cards or layered content sections, maintaining a soft, inviting flow.

#C8BDBA · #9E908F · #7E6E6C

Elegant Interaction

Perfect for buttons and form fields, offering clear states with good contrast and a polished look.

#5C4B4D · #362D2C · #C8BDBA

CSS variables

:root {
  --urban-espresso-bar-1: #362D2C;
  --urban-espresso-bar-2: #5C4B4D;
  --urban-espresso-bar-3: #7E6E6C;
  --urban-espresso-bar-4: #9E908F;
  --urban-espresso-bar-5: #C8BDBA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-espresso-bar": {
        1: "#362D2C",
        2: "#5C4B4D",
        3: "#7E6E6C",
        4: "#9E908F",
        5: "#C8BDBA",
      }
    }
  }
}

Related searches

warm brown gray palettesophisticated coffee colorscozy urban designelegant neutral schemecafe inspired web colors

Palette colors

Hex values

Color 1#362D2C
·
Color 2#5C4B4D
·
Color 3#7E6E6C
·
Color 4#9E908F
·
Color 5#C8BDBA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.4:1AA18
7.3:1AAA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
4.5:1AA18
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
2.6:1Fail
4
4.4:1AA18
2.7:1Fail
1.6:1Fail
1.7:1Fail
5
7.3:1AAA
4.5:1AA18
2.6:1Fail
1.7:1Fail

Similar palettes

More like Urban Espresso Bar

View all neutral
Boulevard Bistro Tones
Aged Leather Tome
Aged Parchment Tome
Ancient Gold Scroll
Ancient Lore Inks
Ancient Scroll Patina