Palette

Espresso Roast Depth

Deep, roasted browns and warm taupes evoke the inviting aroma of fresh espresso.

darkelegant5 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

#3D2C28#5A443F#785C56#967B71#B49C8D

Palette guide

How to use Espresso Roast Depth

Overview

The Espresso Roast Depth palette presents a harmonious blend of deep, roasted browns and warm, inviting taupes, designed to evoke a sense of elegant comfort and natural sophistication. Featuring the grounding #3D2C28 and the rich #5A443F, alongside the approachable #785C56, this collection is perfect for projects seeking a refined yet organic aesthetic. Designers will find these hues versatile for creating warm, inviting interfaces and branding that feels both premium and accessible. Developers can utilize this palette for crafting sophisticated dark modes, editorial layouts, or any design requiring a balanced interplay of depth and gentle warmth. The lighter shades, #967B71 and #B49C8D, offer excellent options for subtle contrast and highlights.

Best used for

High-end furniture or home decor websites
Professional consulting services branding
Upscale cafe or restaurant menus
Photography portfolios with a classic feel
Lifestyle and wellness product packaging
Elegant event stationery

Suggested color roles

primary

#3D2C28 serves as a strong, deep primary background or base color, anchoring the design with sophisticated warmth.

secondary

#5A443F is ideal for content panels, headers, or prominent UI elements, maintaining the palette's rich, cohesive feel.

accent

#785C56 can be used for subtle accents, hover states, or secondary information, offering a gentle yet distinct highlight.

background

#B49C8D provides a soft, warm light background option, offering visual relief and enhancing readability for darker text.

text

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

Accessibility notes

Ensure sufficient contrast when pairing the darkest colors (e.g., #3D2C28) with the lightest (e.g., #B49C8D) for all text.
Be mindful of contrast when using mid-tones such as #785C56 on #967B71 for small text.
Use #3D2C28 for body text on light backgrounds like #B49C8D to ensure optimal readability and elegance.
Always check interactive elements like buttons and links for adequate contrast.

Recommended combinations

Refined Base

Excellent for a sophisticated hero section, with #3D2C28 as background, #785C56 for titles, and #B49C8D for descriptive text.

#3D2C28 · #785C56 · #B49C8D

Textured Warmth

Ideal for content cards: #5A443F as card background, #967B71 for subheadings, and #3D2C28 for main text.

#5A443F · #967B71 · #3D2C28

Gentle Highlight

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

#B49C8D · #967B71 · #785C56

CSS variables

:root {
  --espresso-roast-depth-1: #3D2C28;
  --espresso-roast-depth-2: #5A443F;
  --espresso-roast-depth-3: #785C56;
  --espresso-roast-depth-4: #967B71;
  --espresso-roast-depth-5: #B49C8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "espresso-roast-depth": {
        1: "#3D2C28",
        2: "#5A443F",
        3: "#785C56",
        4: "#967B71",
        5: "#B49C8D",
      }
    }
  }
}

Hex values

Color 1#3D2C28

Color 2#5A443F

Color 3#785C56

Color 4#967B71

Color 5#B49C8D

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

3.4:1AA18

5.1:1AA

1.5:1Fail

2.3:1Fail

3.5:1AA18

2.2:1Fail

1.5:1Fail

2.3:1Fail

3.4:1AA18

2.3:1Fail

1.5:1Fail

5.1:1AA

3.5:1AA18

2.3:1Fail

1.5:1Fail

Similar palettes

More like Espresso Roast Depth

Espresso Roast Depth

See it in context.

Ready when you are.

Built with Espresso Roast Depth.

How to use Espresso Roast Depth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Refined Base

Textured Warmth

Gentle Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Espresso Roast Depth