Back to palettes

Palette

Midnight Espresso Brew

Deep, roasted browns and creams, like a rich, comforting cup of espresso enjoyed under a calming night sky.

darkdark5 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

#2B1D14#4A3020#6C4832#8E6047#AF8060

Palette guide

How to use Midnight Espresso Brew

Overview

The Midnight Espresso Brew palette delivers a rich and comforting blend of deep, roasted browns and warm creams, evoking a strong cup of espresso under a calming night sky. Starting with the profound #2B1D14, it transitions through the earthy #4A3020 and the inviting #6C4832. The palette then brightens to the warm #8E6047, culminating in the creamy #AF8060. This collection is ideal for designers and developers seeking to create a grounded, sophisticated, and warm aesthetic. It's perfect for inviting user interfaces, luxurious branding, or any project aiming for an artisanal, comforting, and subtly rustic feel. These shades offer excellent versatility for depth and visual hierarchy.

Best used for

  • Artisanal coffee or bakery branding
  • Rustic luxury interior design
  • Warm-toned dark mode for content apps
  • Gourmet food and beverage websites
  • High-end leather goods marketing
  • Cozy lifestyle blogs or platforms

Suggested color roles

primary

Utilize #2B1D14 as the foundational background, establishing a deep, roasted brown base for a rich and comforting feel.

secondary

Apply #4A3020 for secondary panels or content blocks, offering subtle differentiation and reinforcing the warm theme.

accent

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

background

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

text

For optimal readability, use #AF8060 or #8E6047 for primary text on darker backgrounds, ensuring clear contrast.

Accessibility notes

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

Recommended combinations

Roasted Base

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

#2B1D14 · #4A3020 · #AF8060

Coffee Gradient

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

#4A3020 · #6C4832 · #8E6047

Creamy Highlight

Perfect for UI components: #2B1D14 as a container, #6C4832 for secondary text, and #AF8060 for active states or icons.

#2B1D14 · #6C4832 · #AF8060

CSS variables

:root {
  --midnight-espresso-brew-1: #2B1D14;
  --midnight-espresso-brew-2: #4A3020;
  --midnight-espresso-brew-3: #6C4832;
  --midnight-espresso-brew-4: #8E6047;
  --midnight-espresso-brew-5: #AF8060;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-espresso-brew": {
        1: "#2B1D14",
        2: "#4A3020",
        3: "#6C4832",
        4: "#8E6047",
        5: "#AF8060",
      }
    }
  }
}

Related searches

dark brown coffee colorswarm espresso paletterustic dark ui themechocolate brown aestheticcomforting neutral palette

Palette colors

Hex values

Color 1#2B1D14
·
Color 2#4A3020
·
Color 3#6C4832
·
Color 4#8E6047
·
Color 5#AF8060
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3:1AA18
4.7:1AA
2
1.3:1Fail
1.5:1Fail
2.3:1Fail
3.5:1AA18
3
2:1Fail
1.5:1Fail
1.5:1Fail
2.3:1Fail
4
3:1AA18
2.3:1Fail
1.5:1Fail
1.6:1Fail
5
4.7:1AA
3.5:1AA18
2.3:1Fail
1.6:1Fail

Similar palettes

More like Midnight Espresso Brew

View all dark
Coffee Bean Aroma
Dark Moody Coffee
Deep Espresso Roast
Espresso Bean Rich
Espresso Roast Dark
Espresso Roast Dark