Palette

Dark Moody Coffee

Deep, rich browns, like a strong, aromatic coffee brew on a quiet, contemplative morning.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dark Moody Coffee 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 Dark Moody Coffee.

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

Data visualization

#362222#4B3232#6D4C41#8D6E63#A1887F

Palette guide

How to use Dark Moody Coffee

Overview

The Dark Moody Coffee palette offers a rich and inviting gradient of deep browns, reminiscent of a strong, aromatic coffee brew on a quiet, contemplative morning. Ranging from the profound #362222 to the warm #A1887F, this palette is perfect for designs that aim for a cozy, sophisticated, and earthy aesthetic. It's an excellent choice for cafe branding, lifestyle blogs, or any project that seeks to evoke warmth and comfort. Designers can leverage its depth for immersive backgrounds, while developers will find it ideal for creating dark mode themes that are both visually rich and incredibly inviting, promoting a sense of calm and indulgence.

Best used for

Coffee shop or cafe branding
Lifestyle blogs with a cozy theme
Interior design inspiration for rustic spaces
Packaging for gourmet food or artisan goods
Dark mode UI for reading or journaling apps
Autumn-themed digital content

Suggested color roles

primary

#4B3232 - A deep, rich coffee brown that provides a strong, warm foundation for primary elements, large sections, or brand identity.

secondary

#6D4C41 - This balanced mid-tone brown offers a harmonious complement, suitable for secondary content blocks, navigation, or as a subtle contrasting panel.

accent

#A1887F - The lightest shade, a soft, warm taupe, perfect for subtle highlights, interactive states, or delicate graphical details, adding a touch of elegance.

background

#362222 - A very deep, almost black-brown, offering a profound, immersive background that enhances the cozy and moody feel of the palette.

text

#8D6E63 - A legible, muted brown that works well for body text on lighter backgrounds within the palette. For optimal readability on the darkest shades, consider a very light cream (e.g., #F0EFEF) for optimal readability.

Accessibility notes

Ensure sufficient contrast when using #A1887F for text on darker backgrounds like #362222 or #4B3232.
Avoid placing #8D6E63 text on #6D4C41; their contrast might be insufficient.
For critical text on the darkest backgrounds, opt for a pure white or very light cream to meet accessibility standards.
Test all text and background pairings using WCAG contrast checkers to meet AA or AAA standards.

Recommended combinations

Espresso Gradient

Creating seamless, deep brown gradients for backgrounds or large hero sections, evoking richness.

#362222 · #4B3232 · #6D4C41

Latte Highlight

Pairing a dominant dark brown with a light accent and a legible text color for cards or feature blocks.

#4B3232 · #A1887F · #8D6E63

Cozy Layers

Designing UI elements where subtle tonal shifts provide hierarchy, like nested containers or tabs.

#6D4C41 · #8D6E63 · #A1887F

CSS variables

:root {
  --dark-moody-coffee-1: #362222;
  --dark-moody-coffee-2: #4B3232;
  --dark-moody-coffee-3: #6D4C41;
  --dark-moody-coffee-4: #8D6E63;
  --dark-moody-coffee-5: #A1887F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-moody-coffee": {
        1: "#362222",
        2: "#4B3232",
        3: "#6D4C41",
        4: "#8D6E63",
        5: "#A1887F",
      }
    }
  }
}

Hex values

Color 1#362222

Color 2#4B3232

Color 3#6D4C41

Color 4#8D6E63

Color 5#A1887F

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

3.2:1AA18

4.5:1AA

1.3:1Fail

1.5:1Fail

2.5:1Fail

3.5:1AA18