Back to palettes

Palette

Espresso Roast Foam

Deep browns and a creamy tan evoke the robust flavor and luxurious foam of a perfect espresso shot.

darkminimal5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Espresso Roast Foam 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 Espresso Roast Foam.

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

Data visualization

#696969#4F4F4F#2F4F4F#8B4513#D2B48C

Palette guide

How to use Espresso Roast Foam

Overview

The Espresso Roast Foam palette offers a unique blend of cool, deep greys, a rich, warm brown, and a creamy tan, perfectly capturing the essence of a robust espresso topped with luxurious foam. With grounding shades like #2F4F4F and #4F4F4F providing a sophisticated base, complemented by the striking #8B4513 and the soft #D2B48C, this collection is ideal for modern, minimalist designs. Designers will find these hues excellent for conveying both strength and delicate balance. Developers can leverage this palette for contemporary branding, tech interfaces, or any project requiring a refined yet impactful visual identity that stands out from typical warm brown palettes. The cool greys add an unexpected edge.

Best used for

  • Modern tech company branding
  • Minimalist website designs
  • Urban cafe or restaurant concepts
  • Product design interfaces
  • Contemporary art portfolios
  • Automotive or industrial design showcases

Suggested color roles

primary

#2F4F4F serves as a deep, sophisticated primary background or base color, offering a unique cool-toned foundation.

secondary

#4F4F4F is ideal for supporting sections, headers, or large UI components, providing depth while maintaining neutrality.

accent

#8B4513 makes for a bold, warm accent, perfect for call-to-action buttons or key information, providing a striking contrast.

background

#D2B48C offers a soft, creamy light background option, providing visual relief and a touch of warmth.

text

For dark backgrounds like #2F4F4F, use #D2B48C or white for optimal readability. For light backgrounds like #D2B48C, use #2F4F4F or black.

Accessibility notes

  • Ensure high contrast when placing #D2B48C on any of the dark greys (#2F4F4F, #4F4F4F, #696969).
  • Be cautious with #696969 on #4F4F4F for small text; contrast may be insufficient.
  • Use #2F4F4F or #4F4F4F for body text on light backgrounds like #D2B48C for optimal readability.
  • Validate contrast ratios for interactive elements, especially if using #8B4513 as an accent.

Recommended combinations

Modern Contrast

Excellent for striking hero sections; #2F4F4F as background, #8B4513 for headlines, and #D2B48C for body text.

#2F4F4F · #8B4513 · #D2B48C

Urban Depth

Ideal for content cards: #4F4F4F as card background, #696969 for subheadings, and #2F4F4F for main text/borders.

#4F4F4F · #696969 · #2F4F4F

Creamy Highlight

Great for call-out boxes or featured elements, with #D2B48C as background, #8B4513 for emphasis, and #4F4F4F for secondary text.

#D2B48C · #8B4513 · #4F4F4F

CSS variables

:root {
  --espresso-roast-foam-1: #696969;
  --espresso-roast-foam-2: #4F4F4F;
  --espresso-roast-foam-3: #2F4F4F;
  --espresso-roast-foam-4: #8B4513;
  --espresso-roast-foam-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "espresso-roast-foam": {
        1: "#696969",
        2: "#4F4F4F",
        3: "#2F4F4F",
        4: "#8B4513",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

cool grey and brown palettemodern espresso color schememinimalist coffee hex codessophisticated dark grey brownurban cafe colors

Palette colors

Hex values

Color 1#696969
·
Color 2#4F4F4F
·
Color 3#2F4F4F
·
Color 4#8B4513
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.6:1Fail
1.3:1Fail
2.8:1Fail
2
1.5:1Fail
1.1:1Fail
1.2:1Fail
4.2:1AA18
3
1.6:1Fail
1.1:1Fail
1.3:1Fail
4.5:1AA
4
1.3:1Fail
1.2:1Fail
1.3:1Fail
3.6:1AA18
5
2.8:1Fail
4.2:1AA18
4.5:1AA
3.6:1AA18

Similar palettes

More like Espresso Roast Foam

View all dark
Anthracite Edge
Brutalist Concrete Form
Cacao Bean Reverie
Coffee Bean Aroma
Coffee Bean Richness
Cosmic Dust