Back to palettes

Palette

Urban Espresso Break

Deep and inviting browns, reminiscent of a comforting espresso enjoyed amidst the urban buzz.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B1D00#3A2B00#4E3B0C#6A4D1B#8E652E

Palette guide

How to use Urban Espresso Break

Overview

The Urban Espresso Break palette offers a rich, deep collection of brown tones, capturing the comforting essence of a robust espresso. This palette is designed to evoke warmth and sophistication, featuring the profound #2B1D00, a versatile #4E3B0C, and the inviting #8E652E. Ideal for designers aiming to create an atmosphere of cozy luxury or grounded elegance, these colors provide a strong foundation for branding and digital interfaces. Developers will appreciate the cohesive range of dark and earthy hues, which work well together for seamless transitions and visual hierarchy. The inclusion of lighter shades like #6A4D1B ensures enough variation for both primary content and subtle accents, making this palette highly adaptable for diverse design applications from web to print.

Best used for

  • Luxury product branding
  • High-end restaurant or cafe interiors
  • E-commerce sites for artisanal goods
  • Editorial design for sophisticated content
  • Mobile apps with a dark, premium theme
  • Branding for distilleries or gourmet food brands

Suggested color roles

primary

Use #2B1D00 for dominant elements like headers, footers, or background sections, providing a strong, luxurious foundation.

secondary

Apply #3A2B00 for subheadings, secondary buttons, or larger content blocks, offering a slightly softer yet equally rich tone.

accent

Introduce #8E652E sparingly for call-to-action buttons, interactive elements, or subtle graphic details to add warmth and contrast.

background

Utilize #2B1D00 or #3A2B00 for dark, immersive backgrounds, creating a sophisticated and cozy user experience.

text

For optimal readability on dark backgrounds, use #8E652E for headings and a near-white or light beige color for body text.

Accessibility notes

  • Ensure high contrast when using lighter colors like #8E652E for text on darker backgrounds such as #2B1D00.
  • Avoid pairing #4E3B0C with #6A4D1B for text, as contrast may be insufficient for readability.
  • For small text on dark backgrounds, a light beige or off-white color is recommended for legibility.
  • Large text in #8E652E on a #2B1D00 background offers an elegant, readable combination.

Recommended combinations

Deep & Rich

A powerful combination for premium branding, using the darkest brown as a base, the lightest for accents, and a mid-tone for secondary elements.

#2B1D00 · #8E652E · #4E3B0C

Earthy Tones

Ideal for a softer, more natural aesthetic, pairing deep and medium browns for a harmonious, inviting feel in content blocks.

#3A2B00 · #6A4D1B · #8E652E

Urban Contrast

Effectively uses depth for visual hierarchy, with the darkest for primary areas, a warm mid-tone for secondary, and the lightest for highlights.

#2B1D00 · #6A4D1B · #8E652E

CSS variables

:root {
  --urban-espresso-break-1: #2B1D00;
  --urban-espresso-break-2: #3A2B00;
  --urban-espresso-break-3: #4E3B0C;
  --urban-espresso-break-4: #6A4D1B;
  --urban-espresso-break-5: #8E652E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-espresso-break": {
        1: "#2B1D00",
        2: "#3A2B00",
        3: "#4E3B0C",
        4: "#6A4D1B",
        5: "#8E652E",
      }
    }
  }
}

Related searches

dark espresso color schemecozy brown paletteearthy sophisticated colorspremium coffee brandingwarm dark UI theme

Palette colors

Hex values

Color 1#2B1D00
·
Color 2#3A2B00
·
Color 3#4E3B0C
·
Color 4#6A4D1B
·
Color 5#8E652E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.1:1Fail
3.2:1AA18
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
2.7:1Fail
3
1.5:1Fail
1.3:1Fail
1.4:1Fail
2.1:1Fail
4
2.1:1Fail
1.8:1Fail
1.4:1Fail
1.5:1Fail
5
3.2:1AA18
2.7:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Urban Espresso Break

View all dark
Espresso Bean Roast
Espresso Cream
Espresso Retreat
Espresso Retreat Corner
Espresso Roast Depth
Espresso Roast Morning