Back to palettes

Palette

Espresso Roast Dark

Deep, rich browns that perfectly capture the robust, comforting essence of freshly roasted espresso beans.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2D1D13#3C281D#4B372F#5A463B#1E130A

Palette guide

How to use Espresso Roast Dark

Overview

The Espresso Roast Dark palette offers an intensely rich and deep collection of browns, perfect for evoking a sense of robust luxury and grounded sophistication. Dominated by nearly black tones like #1E130A and #2D1D13, alongside deep roasted hues such as #3C281D, this palette is ideal for projects that demand a strong, serious, and warm presence. Designers can leverage these colors to create an atmosphere of premium quality and timeless elegance. Developers will find them suitable for dark mode interfaces, high-end product displays, or any context where a profound, comforting aesthetic is desired. The subtle variations, like #4B372F and #5A463B, provide enough range for depth without losing the overall dark appeal.

Best used for

  • High-end luxury product websites
  • Dark mode application themes
  • Gourmet food and beverage branding
  • Photography portfolios with dramatic flair
  • Elegant hotel or hospitality designs
  • Interior design mood boards

Suggested color roles

primary

Use #1E130A or #2D1D13 as the foundational background for an ultra-dark, sophisticated base.

secondary

Apply #3C281D for prominent sections or large text blocks, maintaining the deep, rich feel.

accent

#5A463B can serve as a subtle highlight for interactive elements or secondary information, offering warmth.

background

#2D1D13 provides a slightly lighter, yet still very dark, alternative for content panels or card backgrounds.

text

For backgrounds like #1E130A, use a very light cream or near-white for primary text. For #5A463B, use #1E130A or black for contrast.

Accessibility notes

  • Crucial to pair the dark background colors (e.g., #1E130A) with very light text for readability, like white or a very pale cream.
  • Avoid using mid-tones like #5A463B on #4B372F for body text as contrast will likely be insufficient.
  • Ensure all interactive elements meet WCAG contrast guidelines, especially buttons or links.
  • When using multiple dark shades, differentiate them adequately with size or spacing, not just color, for clarity.

Recommended combinations

Deep Roast

Excellent for a dramatic hero section, with #1E130A as background, #3C281D for headings, and #5A463B for descriptive text.

#1E130A · #3C281D · #5A463B

Subtle Layers

Use #2D1D13 as main background, #4B372F for panels, and #1E130A for borders or dividers to add subtle depth.

#2D1D13 · #4B372F · #1E130A

Warm Undertone

Ideal for footer sections or secondary content, with #3C281D as background, #5A463B for links, and #2D1D13 for general text.

#3C281D · #5A463B · #2D1D13

CSS variables

:root {
  --espresso-roast-dark-2-1: #2D1D13;
  --espresso-roast-dark-2-2: #3C281D;
  --espresso-roast-dark-2-3: #4B372F;
  --espresso-roast-dark-2-4: #5A463B;
  --espresso-roast-dark-2-5: #1E130A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "espresso-roast-dark-2": {
        1: "#2D1D13",
        2: "#3C281D",
        3: "#4B372F",
        4: "#5A463B",
        5: "#1E130A",
      }
    }
  }
}

Related searches

dark brown color schemeespresso coffee hex codesrich warm dark paletteluxury dark brown designrobust coffee colors

Palette colors

Hex values

Color 1#2D1D13
·
Color 2#3C281D
·
Color 3#4B372F
·
Color 4#5A463B
·
Color 5#1E130A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.8:1Fail
1.1:1Fail
2
1.2:1Fail
1.2:1Fail
1.6:1Fail
1.3:1Fail
3
1.5:1Fail
1.2:1Fail
1.3:1Fail
1.6:1Fail
4
1.8:1Fail
1.6:1Fail
1.3:1Fail
2.1:1Fail
5
1.1:1Fail
1.3:1Fail
1.6:1Fail
2.1:1Fail

Similar palettes

More like Espresso Roast Dark

View all dark