Back to palettes

Palette

Dark Roast Coffee

Deep and inviting browns, reminiscent of a strong, rich dark roast coffee brewing on a quiet morning.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A2B00#4E3B0C#6A4D1B#2B1D00#5C4B1C

Palette guide

How to use Dark Roast Coffee

Overview

The Dark Roast Coffee palette offers a rich and inviting collection of deep, warm browns, reminiscent of a strong, aromatic coffee brewing on a quiet morning. Featuring shades like the profound #2B1D00 and #3A2B00, transitioning to the lighter #6A4D1B, this palette is perfect for designs that aim for a cozy, grounded, and sophisticated 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

  • Artisanal coffee shop branding
  • Gourmet food product packaging
  • Cozy interior design blogs
  • Dark mode UI for reading or recipe apps
  • Autumn-themed marketing materials
  • Wellness or mindfulness platforms with a warm touch

Suggested color roles

primary

#3A2B00 - A deep, rich espresso brown that provides a strong, warm foundation for primary elements, large sections, or brand identity.

secondary

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

accent

#6A4D1B - A lighter, warm caramel brown, perfect for subtle highlights, interactive states, or delicate graphical details, adding a touch of elegance.

background

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

text

#5C4B1C - 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 #6A4D1B for text on darker backgrounds like #2B1D00 or #3A2B00.
  • Avoid placing #5C4B1C text on #4E3B0C; 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.

#2B1D00 · #3A2B00 · #4E3B0C

Caramel Highlight

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

#3A2B00 · #6A4D1B · #5C4B1C

Rich Layers

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

#4E3B0C · #5C4B1C · #6A4D1B

CSS variables

:root {
  --dark-roast-coffee-1: #3A2B00;
  --dark-roast-coffee-2: #4E3B0C;
  --dark-roast-coffee-3: #6A4D1B;
  --dark-roast-coffee-4: #2B1D00;
  --dark-roast-coffee-5: #5C4B1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-roast-coffee": {
        1: "#3A2B00",
        2: "#4E3B0C",
        3: "#6A4D1B",
        4: "#2B1D00",
        5: "#5C4B1C",
      }
    }
  }
}

Related searches

dark brown coffee palettewarm earthy colorscozy dark themerich brown hex codesinviting dark UI

Palette colors

Hex values

Color 1#3A2B00
·
Color 2#4E3B0C
·
Color 3#6A4D1B
·
Color 4#2B1D00
·
Color 5#5C4B1C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
1.2:1Fail
1.6:1Fail
2
1.3:1Fail
1.4:1Fail
1.5:1Fail
1.3:1Fail
3
1.8:1Fail
1.4:1Fail
2.1:1Fail
1.1:1Fail
4
1.2:1Fail
1.5:1Fail
2.1:1Fail
1.9:1Fail
5
1.6:1Fail
1.3:1Fail
1.1:1Fail
1.9:1Fail

Similar palettes

More like Dark Roast Coffee

View all dark
Espresso Retreat
Espresso Bean Roast
Espresso Cream
Espresso Retreat Corner
Espresso Roast Depth
Espresso Roast Morning