Back to palettes

Palette

Midnight Mocha Blend

Rich, deep shades of roasted coffee beans, a comforting and sophisticated aroma in color form.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Mocha Blend 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 Mocha Blend.

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

Data visualization

#2C1B17#573E3B#8B6E6A#BCAAA4#DDD9D6

Palette guide

How to use Midnight Mocha Blend

Overview

The Midnight Mocha Blend palette offers a comforting and sophisticated gradient of rich browns, from deep espresso to creamy latte. It features the grounding #2C1B17 (darkest brown), the warm #573E3B (medium dark brown), the inviting #8B6E6A (medium brown), the soft #BCAAA4 (light taupe), and the near-white #DDD9D6. This palette is designed for designers and developers aiming to evoke warmth, coziness, and a refined, natural aesthetic. It's perfect for projects that require a comforting yet elegant feel, reminiscent of a favorite coffee shop or a tranquil evening at home.

Best used for

  • Coffee shop branding and websites
  • Cozy blog themes or online journals
  • Interior design inspiration platforms
  • Comforting mobile applications
  • Artisanal food or beverage packaging
  • E-commerce sites for natural or handcrafted goods

Suggested color roles

primary

Use #573E3B as the main background or for dominant content areas, providing a warm and inviting base.

secondary

Apply #8B6E6A for supportive elements, subheadings, or secondary information, offering a softer, harmonious complement.

accent

Utilize #BCAAA4 as a soft, creamy highlight for interactive elements, subtle borders, or key visual cues, adding warmth.

background

Employ #2C1B17 as the deepest background color, creating an immersive, grounding canvas for the lighter browns.

text

For primary text, #DDD9D6 offers excellent readability on darker backgrounds. For secondary text, #BCAAA4 can be used with sufficient font weight.

Accessibility notes

  • Ensure #BCAAA4 and #DDD9D6 have sufficient contrast when used for text on #2C1B17 or #573E3B backgrounds.
  • Avoid using #573E3B and #8B6E6A as text and background pairs due to insufficient contrast for small text.
  • Consider using a dark charcoal or black text color for optimal readability on #BCAAA4 or #DDD9D6.
  • Maintain clear visual cues for interactive elements, ensuring they stand out against the warm, similar tones.

Recommended combinations

Espresso Base

A comforting foundation with #2C1B17 as background, #573E3B for content panels, and #DDD9D6 for primary text or headings.

#2C1B17 · #573E3B · #DDD9D6

Latte Layers

Layered design using #573E3B for main content, #8B6E6A for sub-sections, and #BCAAA4 for secondary information or subtle UI.

#573E3B · #8B6E6A · #BCAAA4

Warm Readability

Employ #2C1B17 as background, #BCAAA4 for prominent headings, and #8B6E6A for body text where good contrast is maintained.

#2C1B17 · #BCAAA4 · #8B6E6A

CSS variables

:root {
  --midnight-mocha-blend-1: #2C1B17;
  --midnight-mocha-blend-2: #573E3B;
  --midnight-mocha-blend-3: #8B6E6A;
  --midnight-mocha-blend-4: #BCAAA4;
  --midnight-mocha-blend-5: #DDD9D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-mocha-blend": {
        1: "#2C1B17",
        2: "#573E3B",
        3: "#8B6E6A",
        4: "#BCAAA4",
        5: "#DDD9D6",
      }
    }
  }
}

Related searches

coffee color palettewarm brown schemecomforting design colorsmocha gradientcozy web theme

Palette colors

Hex values

Color 1#2C1B17
·
Color 2#573E3B
·
Color 3#8B6E6A
·
Color 4#BCAAA4
·
Color 5#DDD9D6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.6:1AA18
7.4:1AAA
11.7:1AAA
2
1.7:1Fail
2.1:1Fail
4.4:1AA18
6.9:1AA
3
3.6:1AA18
2.1:1Fail
2.1:1Fail
3.3:1AA18
4
7.4:1AAA
4.4:1AA18
2.1:1Fail
1.6:1Fail
5
11.7:1AAA
6.9:1AA
3.3:1AA18
1.6:1Fail

Similar palettes

More like Midnight Mocha Blend

View all dark
Espresso Bean Roam
Espresso Roast Depth
Coffee Bean Richness
Espresso Bean Roam
Roasted Coffee Hues
Artisan Cocoa Swirl