Back to palettes

Palette

Warm Mocha Dream

Rich, comforting tones of chocolate and coffee, creating a cozy and inviting atmosphere like a warm mocha.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warm Mocha Dream 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 Warm Mocha Dream.

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

Data visualization

#3D2B1F#5A3E2B#7C5B3E#9E7D5C#C0A17A

Palette guide

How to use Warm Mocha Dream

Overview

The Warm Mocha Dream palette presents a sophisticated gradient of rich browns, from deep, dark chocolate to creamy, light mocha, creating an atmosphere of cozy indulgence. With profound hues like #3D2B1F and #5A3E2B, transitioning through the elegant #7C5B3E and #9E7D5C, to the soft #C0A17A, this collection is perfect for luxurious and comforting digital designs. Designers can harness these colors to evoke a sense of warmth, quality, and understated elegance, making it ideal for premium brands, sophisticated lifestyle platforms, or any project seeking a refined, inviting aesthetic.

Best used for

  • Luxury chocolate or dessert brands
  • High-end coffee shop interiors
  • Premium home furnishings e-commerce
  • Sophisticated lifestyle magazines
  • Spa and wellness retreats
  • Exclusive members-only platforms

Suggested color roles

primary

#3D2B1F - A deep, luxurious dark chocolate, excellent for main navigation, imposing headlines, or strong calls to action, conveying sophistication.

secondary

#5A3E2B - A rich, warm espresso brown, perfect for subheadings, active states, or secondary informational blocks, adding depth.

accent

#7C5B3E - A inviting caramel brown, ideal for subtle highlights, interactive elements, or key visual details to draw a gentle focus.

background

#C0A17A - A soft, creamy mocha, providing a light, warm canvas that allows the darker browns to create elegant contrast.

text

#3D2B1F - A dark, highly readable chocolate brown for body text on light backgrounds, ensuring excellent legibility and maintaining the palette's rich feel.

Accessibility notes

  • Ensure robust contrast when using #3D2B1F or #5A3E2B for text on #C0A17A or #9E7D5C backgrounds to meet WCAG AA standards.
  • Avoid using #9E7D5C or #7C5B3E for small text on #C0A17A due to potential readability issues.
  • For dark backgrounds like #3D2B1F, use pure white or a very light cream for text to ensure maximum readability.
  • Provide clear focus states for interactive elements, perhaps a subtle glow or border in #7C5B3E.

Recommended combinations

Rich Indulgence

Ideal for elegant headers or product showcases, with #3D2B1F for titles, #7C5B3E for accents, and #C0A17A as a luxurious background.

#C0A17A · #3D2B1F · #7C5B3E

Espresso Blend

Excellent for content cards or testimonials, using #9E7D5C as a background with #5A3E2B for text, creating a balanced, warm feel.

#9E7D5C · #5A3E2B · #7C5B3E

Deep Cocoa

A high-contrast pairing for forms or navigation, where #3D2B1F provides strong text or button color against a light background.

#3D2B1F · #C0A17A · #7C5B3E

CSS variables

:root {
  --warm-mocha-dream-1: #3D2B1F;
  --warm-mocha-dream-2: #5A3E2B;
  --warm-mocha-dream-3: #7C5B3E;
  --warm-mocha-dream-4: #9E7D5C;
  --warm-mocha-dream-5: #C0A17A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-mocha-dream": {
        1: "#3D2B1F",
        2: "#5A3E2B",
        3: "#7C5B3E",
        4: "#9E7D5C",
        5: "#C0A17A",
      }
    }
  }
}

Related searches

luxury brown palettesophisticated coffee colorschocolate color schemewarm elegant designcozy dark neutrals

Palette colors

Hex values

Color 1#3D2B1F
·
Color 2#5A3E2B
·
Color 3#7C5B3E
·
Color 4#9E7D5C
·
Color 5#C0A17A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.5:1AA18
5.5:1AA
2
1.4:1Fail
1.6:1Fail
2.6:1Fail
4:1AA18
3
2.2:1Fail
1.6:1Fail
1.6:1Fail
2.5:1Fail
4
3.5:1AA18
2.6:1Fail
1.6:1Fail
1.6:1Fail
5
5.5:1AA
4:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Warm Mocha Dream

View all warm
Barista's Brew Comfort
Spiced Coffee Brew
Warm Coffee Brew
Artisan Loaf Hearth
Caramel Swirl Cafe
Chai Latte