Palette

Mocha Morning Brew

A comforting and inviting palette, reminiscent of a warm mocha latte on a quiet morning.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A3026#7C5D4F#B6A28E#DDCBBA#F5F1E9

Palette guide

How to use Mocha Morning Brew

Overview

The Mocha Morning Brew palette is a rich, comforting collection of warm browns and creamy neutrals, evoking the cozy ambiance of a freshly prepared mocha latte. This inviting palette features the deep, dark chocolate of #4A3026, the rich coffee brown of #7C5D4F, a warm beige #B6A28E, a soft latte tone #DDCBBA, and the delicate cream of #F5F1E9. It's perfectly suited for designs that aim to convey warmth, comfort, and natural elegance. Ideal for cafes, food branding, cozy home decor, or websites seeking an approachable and sophisticated earthy feel, this palette creates an inviting visual experience.

Best used for

Coffee shop branding and menus
Cozy blog or website designs
Food and beverage packaging
Home decor and interior design
Natural and organic product branding
Autumn or winter seasonal marketing

Suggested color roles

primary

Use #4A3026 as a grounding primary color for headers, footers, or strong brand elements, providing depth and warmth.

secondary

Employ #7C5D4F for prominent sections, navigation, or larger text, offering a rich yet approachable brown.

accent

Highlight key information or interactive elements with #B6A28E or #DDCBBA for a gentle, inviting contrast.

background

The light and airy #F5F1E9 serves as an excellent primary background, creating a clean, warm canvas.

text

For body text, use the deep #4A3026 for optimal readability against lighter backgrounds. On darker elements, #F5F1E9 or a light cream works well.

Accessibility notes

Ensure #4A3026 provides sufficient contrast for text when used over #B6A28E or #DDCBBA.
Use #F5F1E9 for text on #4A3026 or #7C5D4F backgrounds to meet WCAG AA contrast guidelines.
Avoid using #B6A28E for small text on #DDCBBA backgrounds due to potential readability issues.
Larger text in #7C5D4F on #F5F1E9 provides excellent contrast and warmth.

Recommended combinations

Rich Mocha Base

Creates a strong, warm foundation with a light accent for text or UI elements.

#4A3026 · #7C5D4F · #F5F1E9

Latte Layers

Ideal for a layered, soft aesthetic, perfect for backgrounds and subtle graphic elements.

#DDCBBA · #B6A28E · #7C5D4F

Creamy Comfort

Provides a light, inviting canvas with darker shades for readability and visual anchors.

#F5F1E9 · #B6A28E · #4A3026

CSS variables

:root {
  --mocha-morning-brew-1: #4A3026;
  --mocha-morning-brew-2: #7C5D4F;
  --mocha-morning-brew-3: #B6A28E;
  --mocha-morning-brew-4: #DDCBBA;
  --mocha-morning-brew-5: #F5F1E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mocha-morning-brew": {
        1: "#4A3026",
        2: "#7C5D4F",
        3: "#B6A28E",
        4: "#DDCBBA",
        5: "#F5F1E9",
      }
    }
  }
}

Hex values

Color 1#4A3026

Color 2#7C5D4F

Color 3#B6A28E

Color 4#DDCBBA

Color 5#F5F1E9

Accessibility

Contrast checker

2:1Fail

4.9:1AA

7.7:1AAA

10.7:1AAA

2:1Fail

2.4:1Fail

3.8:1AA18

5.3:1AA

4.9:1AA

2.4:1Fail

1.6:1Fail

2.2:1Fail

7.7:1AAA

3.8:1AA18

1.6:1Fail

1.4:1Fail

10.7:1AAA

5.3:1AA

2.2:1Fail

1.4:1Fail

Similar palettes

More like Mocha Morning Brew

Parisian Cafe Au Lait