Back to palettes

Palette

Espresso Roast Depth

Rich, deep browns evoking the aroma and warmth of a freshly brewed, dark roast espresso.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D2C26#5C4A42#7A6960#99897D#B8A89A

Palette guide

How to use Espresso Roast Depth

Overview

The Espresso Roast Depth palette offers a refined spectrum of warm, deep browns and sophisticated taupes, perfect for creating an atmosphere of understated elegance and comforting tranquility. Featuring the grounding #3D2C26 and the inviting #5C4A42, alongside the softer #7A6960, this collection evokes the rich aroma and serene ambiance of a premium coffee experience. Designers will find these hues ideal for conveying maturity, warmth, and a natural, organic feel. Developers can leverage this palette for sophisticated dark mode interfaces, upscale branding, or any project requiring a harmonious blend of depth and gentle luminosity. The lighter shades, #99897D and #B8A89A, provide excellent opportunities for subtle contrast and highlights.

Best used for

  • Upscale interior design websites
  • Luxury product showcases
  • Wellness and mindfulness applications
  • High-end personal branding
  • E-commerce for artisanal crafts
  • Corporate websites needing a warm, professional touch

Suggested color roles

primary

#3D2C26 serves as an excellent deep base or dominant background color, establishing a grounded and sophisticated feel.

secondary

#5C4A42 is ideal for supporting sections, headers, or large UI components, maintaining the palette's cohesive warmth.

accent

#7A6960 can be used for subtle accents, hover states, or secondary information, adding a gentle lift without stark contrast.

background

#B8A89A offers a soft, light background option, providing visual breathing room while retaining warmth.

text

For dark backgrounds like #3D2C26, use #B8A89A or a near-white for readability. For lighter backgrounds like #B8A89A, use #3D2C26 or charcoal.

Accessibility notes

  • Ensure sufficient contrast when pairing the darkest colors (e.g., #3D2C26) with the lightest (e.g., #B8A89A) for text.
  • Be cautious when combining mid-tones like #7A6960 with #99897D for small text, as contrast may be insufficient.
  • Use #3D2C26 for body text on light backgrounds such as #B8A89A to ensure optimal readability.
  • Validate contrast ratios for interactive elements against their background colors.

Recommended combinations

Elegant Foundation

Ideal for a sophisticated hero section, with #3D2C26 as background, #7A6960 for titles, and #B8A89A for descriptive text.

#3D2C26 · #7A6960 · #B8A89A

Soft Layers

Effective for content cards: #5C4A42 as card background, #99897D for subheadings, and #3D2C26 for main text.

#5C4A42 · #99897D · #3D2C26

Gentle Transition

Great for subtle gradients or layered elements, moving from light to mid-tone for a serene visual flow.

#B8A89A · #99897D · #7A6960

CSS variables

:root {
  --espresso-roast-depth-2-1: #3D2C26;
  --espresso-roast-depth-2-2: #5C4A42;
  --espresso-roast-depth-2-3: #7A6960;
  --espresso-roast-depth-2-4: #99897D;
  --espresso-roast-depth-2-5: #B8A89A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "espresso-roast-depth-2": {
        1: "#3D2C26",
        2: "#5C4A42",
        3: "#7A6960",
        4: "#99897D",
        5: "#B8A89A",
      }
    }
  }
}

Related searches

warm taupe color palettesophisticated brown hex codeselegant coffee color schemenatural earthy tones designdeep neutral brown palette

Palette colors

Hex values

Color 1#3D2C26
·
Color 2#5C4A42
·
Color 3#7A6960
·
Color 4#99897D
·
Color 5#B8A89A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.9:1AA18
5.7:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.6:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
3.9:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
5.7:1AA
3.6:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Espresso Roast Depth

View all dark
Espresso Bean Roast
Midnight Espresso Brew
Espresso Cream
Espresso Retreat
Espresso Retreat Corner
Espresso Roast Morning