Palette

Warm Mocha Brew

The rich, comforting colors of a freshly brewed mocha, deep and inviting.

WarmCalm5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6F4E37#8B4513#A0522D#D2B48C#B58A67

Palette guide

How to use Warm Mocha Brew

Overview

The Warm Mocha Brew palette offers a rich and comforting blend of deep browns and creamy beiges, reminiscent of a freshly prepared coffee beverage. With robust hues like #6F4E37 and #8B4513, complemented by the inviting warmth of #A0522D, #B58A67, and the soft #D2B48C, this collection is perfect for creating cozy, sophisticated, and inviting digital experiences. Designers can utilize these colors to evoke a sense of calm, quality, and artisan craftsmanship, making it ideal for brands that value comfort, tradition, or a touch of indulgence.

Best used for

Coffee shop or bakery websites
Gourmet food packaging design
Cozy home decor branding
E-commerce for artisanal products
Lifestyle blogs with a focus on comfort
Bookstore or library digital interfaces

Suggested color roles

primary

#6F4E37 - A deep, rich mocha brown, excellent for main navigation, strong headlines, or primary calls to action, conveying depth and quality.

secondary

#8B4513 - A warm, inviting coffee brown, perfect for subheadings, active states, or supporting content blocks, adding a touch of rustic comfort.

accent

#A0522D - A slightly reddish-brown, ideal for subtle highlights, interactive elements, or key visual details to draw focused attention.

background

#D2B48C - A soft, creamy beige, providing a light, warm canvas that allows the darker browns to stand out elegantly.

text

#6F4E37 - A dark, highly readable mocha brown for body text on light backgrounds, ensuring excellent legibility and maintaining the palette's inviting tone.

Accessibility notes

Ensure strong contrast when pairing dark browns like #6F4E37 or #8B4513 with the lighter #D2B48C for text to meet WCAG AA standards.
Avoid using #B58A67 for critical text on #D2B48C backgrounds due to insufficient contrast for readability.
Provide clear focus indicators for interactive elements, perhaps using #A0522D against a lighter background.
Consider using pure white text for buttons or headlines on #6F4E37 or #8B4513 for maximum impact and readability.

Recommended combinations

Espresso Base

Ideal for hero sections or prominent content blocks, with #6F4E37 for titles, #A0522D for accents, and #D2B48C as a soft background.

#D2B48C · #6F4E37 · #A0522D

Latte Swirl

Excellent for product descriptions or testimonials, using #B58A67 as a background with #8B4513 for text, creating a cozy feel.

#B58A67 · #8B4513 · #A0522D

Dark Roast

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

#6F4E37 · #D2B48C · #A0522D

CSS variables

:root {
  --warm-mocha-brew-1: #6F4E37;
  --warm-mocha-brew-2: #8B4513;
  --warm-mocha-brew-3: #A0522D;
  --warm-mocha-brew-4: #D2B48C;
  --warm-mocha-brew-5: #B58A67;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-mocha-brew": {
        1: "#6F4E37",
        2: "#8B4513",
        3: "#A0522D",
        4: "#D2B48C",
        5: "#B58A67",
      }
    }
  }
}

Hex values

Color 1#6F4E37

Color 2#8B4513

Color 3#A0522D

Color 4#D2B48C

Color 5#B58A67

Accessibility

Contrast checker

1:1Fail

1.3:1Fail

3.8:1AA18

2.4:1Fail

1:1Fail

1.3:1Fail

3.6:1AA18

2.3:1Fail

1.3:1Fail

2.8:1Fail

1.8:1Fail

3.8:1AA18

3.6:1AA18

2.8:1Fail

1.6:1Fail

2.4:1Fail

2.3:1Fail

1.8:1Fail

1.6:1Fail

Similar palettes

More like Warm Mocha Brew

Warm Mocha Brew

See it in context.

Ready when you are.

Built with Warm Mocha Brew.

How to use Warm Mocha Brew

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Espresso Base

Latte Swirl

Dark Roast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Warm Mocha Brew