Back to palettes

Palette

Deep Espresso Roast

A rich and comforting collection, mimicking the deep, roasted hues of premium coffee beans.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Espresso Roast 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 Deep Espresso Roast.

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

Data visualization

#2C0E0B#3A1B0E#5E3B2E#7D5B4D#9B7B6D

Palette guide

How to use Deep Espresso Roast

Overview

The Deep Espresso Roast palette offers a rich, comforting spectrum of warm browns, reminiscent of freshly brewed coffee. It starts with the profound, near-black #2C0E0B, moving through the deep, dark brown of #3A1B0E and the robust #5E3B2E. The palette then softens with the inviting #7D5B4D, culminating in the creamy, light brown #9B7B6D. This collection is perfect for designs aiming to evoke warmth, coziness, or a sense of artisanal quality. It provides a sophisticated and grounded aesthetic, ideal for creating inviting and luxurious digital or physical spaces.

Best used for

  • Coffee shop and cafe branding
  • Gourmet food product packaging
  • Cozy interior design websites
  • Luxury leather goods brands
  • Digital portfolios for photographers
  • Book publishing or literary platforms

Suggested color roles

primary

Use #3A1B0E for main content and brand elements, conveying depth and richness.

secondary

#5E3B2E is ideal for subheadings, navigation, or content cards, offering a warm contrast.

accent

#2C0E0B can be used for impactful borders, strong text, or subtle background textures, adding gravitas.

background

#9B7B6D provides a soft, warm base, excellent for readability and a comfortable feel.

text

For light backgrounds like #9B7B6D, use a dark brown like #2C0E0B or #3A1B0E. On darker backgrounds, a creamy white like #FBFBFB works well.

Accessibility notes

  • Ensure sufficient contrast when pairing #7D5B4D text with #9B7B6D backgrounds.
  • White or very light cream text provides good readability on #2C0E0B and #3A1B0E.
  • Avoid low-contrast combinations like #5E3B2E text on #7D5B4D for small text sizes.
  • Check contrast ratios for all text and interactive elements to ensure legibility.

Recommended combinations

Rich Roast

Creates a profound, luxurious base, ideal for headers and main visual elements.

#2C0E0B · #3A1B0E · #5E3B2E

Coffee Cream

Excellent for gradients or layered content, offering a soft, inviting transition.

#5E3B2E · #7D5B4D · #9B7B6D

Warm Contrast

Use the darkest for text, mid-tone for accents, and lightest for a readable background.

#2C0E0B · #7D5B4D · #9B7B6D

CSS variables

:root {
  --deep-espresso-roast-1: #2C0E0B;
  --deep-espresso-roast-2: #3A1B0E;
  --deep-espresso-roast-3: #5E3B2E;
  --deep-espresso-roast-4: #7D5B4D;
  --deep-espresso-roast-5: #9B7B6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-espresso-roast": {
        1: "#2C0E0B",
        2: "#3A1B0E",
        3: "#5E3B2E",
        4: "#7D5B4D",
        5: "#9B7B6D",
      }
    }
  }
}

Related searches

deep brown color schemecoffee inspired palettewarm neutral brandingcozy earthy tonesdark wood design colors

Palette colors

Hex values

Color 1#2C0E0B
·
Color 2#3A1B0E
·
Color 3#5E3B2E
·
Color 4#7D5B4D
·
Color 5#9B7B6D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.8:1Fail
3:1Fail
4.6:1AA
2
1.1:1Fail
1.6:1Fail
2.6:1Fail
4.1:1AA18
3
1.8:1Fail
1.6:1Fail
1.6:1Fail
2.5:1Fail
4
3:1Fail
2.6:1Fail
1.6:1Fail
1.6:1Fail
5
4.6:1AA
4.1:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Deep Espresso Roast

View all dark
Coffee Bean Aroma
Espresso Bean Rich
Espresso Roast Dark
Espresso Roast Dark
Midnight Espresso Brew
Dark Moody Coffee