Palette

Midnight Espresso Brew

Deep, rich browns and warm grays reminiscent of strong espresso and cozy evenings.

darkcalm5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Espresso Brew 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 Midnight Espresso Brew.

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

Data visualization

#2C1E1B#4A3B37#6E5B57#9A8B87#C9BEBA

Palette guide

How to use Midnight Espresso Brew

Overview

The Midnight Espresso Brew palette offers a comforting yet sophisticated blend of deep, rich browns and warm grays, reminiscent of strong espresso and cozy evenings. It begins with the profound #2C1E1B, transitioning through the warm #4A3B37 and the inviting #6E5B57. The palette then brightens to the soft #9A8B87, culminating in the creamy #C9BEBA. This collection is ideal for designers and developers seeking to evoke warmth, comfort, and understated elegance. It's perfect for creating cozy user interfaces, inviting backgrounds, or branding that speaks to artisanal quality, relaxation, and a touch of rustic luxury. These shades offer a harmonious blend for a grounded and sophisticated aesthetic.

Best used for

Coffee shop branding and websites
Cozy home decor e-commerce
Artisanal food product packaging
Warm-toned dark mode interfaces
Boutique hotel or lounge design
Book publishing or literary platforms

Suggested color roles

primary

Use #2C1E1B as the foundational background, establishing a rich, dark espresso base for warmth and depth.

secondary

Apply #4A3B37 for secondary panels or content blocks, offering subtle differentiation and a comforting tone.

accent

Reserve #C9BEBA for key interactive elements, calls-to-action, or important text to provide a soft, creamy highlight.

background

The deep #2C1E1B works wonderfully as a primary background, creating a cozy and sophisticated canvas for content.

text

For optimal readability, use #C9BEBA or #9A8B87 for primary text on darker backgrounds, ensuring clear contrast.

Accessibility notes

Ensure high contrast for text, especially when using #C9BEBA on #2C1E1B or #4A3B37 backgrounds, to meet WCAG AA.
Avoid pairing #6E5B57 with #4A3B37 for small text; choose a lighter shade for improved legibility.
Interactive elements should clearly stand out using #C9BEBA against darker backgrounds to aid users with visual impairments.
Offer a pure white text option for users who require enhanced readability on very dark surfaces.

Recommended combinations

Espresso Core

Excellent for core UI structures, using darkest shades for depth and #C9BEBA for prominent headings or navigation.

#2C1E1B · #4A3B37 · #C9BEBA

Warm Gradient

Ideal for subtle background gradients or progress bars, creating a smooth, inviting transition.

#4A3B37 · #6E5B57 · #9A8B87

Creamy Contrast

Perfect for UI components: #2C1E1B as a container, #6E5B57 for secondary text, and #C9BEBA for active states or icons.

#2C1E1B · #6E5B57 · #C9BEBA

CSS variables

:root {
  --midnight-espresso-brew-2-1: #2C1E1B;
  --midnight-espresso-brew-2-2: #4A3B37;
  --midnight-espresso-brew-2-3: #6E5B57;
  --midnight-espresso-brew-2-4: #9A8B87;
  --midnight-espresso-brew-2-5: #C9BEBA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-espresso-brew-2": {
        1: "#2C1E1B",
        2: "#4A3B37",
        3: "#6E5B57",
        4: "#9A8B87",
        5: "#C9BEBA",
      }
    }
  }
}

Hex values

Color 1#2C1E1B

Color 2#4A3B37

Color 3#6E5B57

Color 4#9A8B87

Color 5#C9BEBA

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

4.9:1AA

8.8:1AAA

1.5:1Fail

1.7:1Fail

3.3:1AA18

5.9:1AA

2.5:1Fail

1.7:1Fail

1.9:1Fail

3.5:1AA18

4.9:1AA

3.3:1AA18

1.9:1Fail

1.8:1Fail

8.8:1AAA

5.9:1AA

3.5:1AA18

1.8:1Fail

Similar palettes

More like Midnight Espresso Brew

Espresso Retreat Corner

Espresso Roast Morning