Palette

Warm Mocha Swirl

Rich, comforting browns and creams blended together, like a delicious swirled coffee beverage.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C3D2D#8A654F#B79E7D#E0D4C7#3E2D20

Palette guide

How to use Warm Mocha Swirl

Overview

The Warm Mocha Swirl palette embodies the comforting blend of rich coffee and creamy milk, offering a harmonious transition from deep browns to soft, inviting creams. Featuring intense hues like #3E2D20 and #5C3D2D, flowing into the warmer #8A654F and #B79E7D, and culminating in the gentle #E0D4C7, this collection is perfect for creating cozy and approachable digital experiences. Designers can use these colors to evoke a sense of calm, warmth, and artisanal quality, making it ideal for brands focused on comfort, food, or natural, handcrafted aesthetics.

Best used for

Cafe and coffee shop branding
Baking and dessert recipe websites
Home goods and decor e-commerce
Lifestyle blogs with a focus on comfort
Artisan craft marketplaces
Relaxation and mindfulness apps

Suggested color roles

primary

#5C3D2D - A deep, inviting mocha brown, excellent for main navigation, strong headlines, or primary calls to action, conveying warmth and substance.

secondary

#8A654F - A rich, medium coffee brown, perfect for subheadings, active states, or supporting content blocks, adding a touch of rustic elegance.

accent

#3E2D20 - A very deep, almost black-brown, ideal for subtle highlights, strong borders, or key visual details that require maximum contrast and impact.

background

#E0D4C7 - A soft, creamy off-white, providing a gentle and expansive canvas that allows the darker browns to create a comforting contrast.

text

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

Accessibility notes

Ensure strong contrast when using #3E2D20 or #5C3D2D for text on #E0D4C7 or #B79E7D backgrounds to meet WCAG AA standards.
Avoid using #B79E7D or #8A654F for small text on #E0D4C7 due to potential readability issues for some users.
For dark backgrounds like #3E2D20, use pure white or a very light cream for text to ensure maximum readability and visual pop.
Provide clear focus states for interactive elements, perhaps using #8A654F as a border or glow.

Recommended combinations

Creamy Blend

Ideal for hero sections or prominent content blocks, with #5C3D2D for titles, #8A654F for accents, and #E0D4C7 as a soothing background.

#E0D4C7 · #5C3D2D · #8A654F

Dark Swirl

Excellent for content cards or testimonials, using #B79E7D as a background with #3E2D20 for text, creating strong readability.

#B79E7D · #3E2D20 · #8A654F

Mocha Contrast

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

#5C3D2D · #E0D4C7 · #B79E7D

CSS variables

:root {
  --warm-mocha-swirl-1: #5C3D2D;
  --warm-mocha-swirl-2: #8A654F;
  --warm-mocha-swirl-3: #B79E7D;
  --warm-mocha-swirl-4: #E0D4C7;
  --warm-mocha-swirl-5: #3E2D20;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-mocha-swirl": {
        1: "#5C3D2D",
        2: "#8A654F",
        3: "#B79E7D",
        4: "#E0D4C7",
        5: "#3E2D20",
      }
    }
  }
}

Hex values

Color 1#5C3D2D

Color 2#8A654F

Color 3#B79E7D

Color 4#E0D4C7

Color 5#3E2D20

Accessibility

Contrast checker

1.9:1Fail

3.8:1AA18

6.7:1AA

1.3:1Fail

1.9:1Fail

2:1Fail

3.6:1AA18

2.5:1Fail

3.8:1AA18

2:1Fail

1.8:1Fail

5.1:1AA

6.7:1AA

3.6:1AA18

1.8:1Fail

9:1AAA

1.3:1Fail

2.5:1Fail

5.1:1AA

9:1AAA

Similar palettes

More like Warm Mocha Swirl

Barista Roast Comfort

Cafe Latte Comfort

Caramel Latte Dream