Back to palettes

Palette

Espresso Bean Roam

A deep, comforting collection of browns inspired by freshly roasted espresso beans.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Espresso Bean Roam 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 Bean Roam.

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

Data visualization

#2F1B0C#4A2E1D#6B4C3D#907366#B59C90

Palette guide

How to use Espresso Bean Roam

Overview

The "Espresso Bean Roam" palette (ID: espresso-bean-roam) presents a deeply comforting collection of browns, inspired by the nuanced journey from raw bean to rich espresso. It transitions from the profound #2F1B0C and #4A2E1D, through the warm #6B4C3D, to the softer, almost taupe #907366 and #B59C90. This palette is perfect for designs seeking an elegant, natural, and inviting aesthetic with a sophisticated gradient. It evokes warmth, groundedness, and understated luxury, making it highly versatile for branding that aims for a refined yet approachable feel, reminiscent of a comforting coffee experience.

Best used for

  • High-end coffee shop interiors and branding
  • Boutique hotel websites and decor
  • Organic and natural product packaging
  • Luxury real estate marketing materials
  • Artisan craft and handmade goods e-commerce
  • Minimalist and sophisticated personal blogs

Suggested color roles

primary

#2F1B0C (Deepest Espresso) - Best for foundational elements, headers, or large background areas to establish a profound and elegant presence.

secondary

#4A2E1D (Rich Mocha) - Excellent for primary content blocks, navigational elements, or key graphical sections, providing depth and warmth.

accent

#B59C90 (Warm Greige) - Ideal for highlights, subtle interactive elements, or delicate details, offering a soft, sophisticated contrast and luminosity.

background

#6B4C3D (Cocoa Brown) - A versatile mid-tone for backgrounds, creating a warm and inviting canvas for both darker and lighter elements.

text

#907366 (Taupe Brown) - Suitable for prominent titles or decorative text on lighter backgrounds. For optimal readability on darker backgrounds, a crisp white or light cream is recommended.

Accessibility notes

  • Ensure sufficient contrast when using #907366 or #B59C90 for text on any of the darker browns in the palette.
  • Avoid low-contrast pairings like #6B4C3D text on #4A2E1D backgrounds for critical information.
  • Always test text and interactive element contrasts against their backgrounds to meet WCAG 2.1 standards.
  • The palette's inherent warmth and softness can be enhanced by strategic use of the lighter tones to prevent visual heaviness.

Recommended combinations

Deep Comfort

Creates a deep, rich foundation perfect for luxury branding or backgrounds requiring significant depth and warmth.

#2F1B0C · #4A2E1D · #6B4C3D

Soft Elegance

Ideal for softer design elements, secondary content, or areas needing a warm, inviting, and gentle feel with subtle contrast.

#6B4C3D · #907366 · #B59C90

Natural Gradient

Excellent for creating a smooth, sophisticated transition from deeper browns to lighter, almost ethereal tones.

#4A2E1D · #907366 · #B59C90

CSS variables

:root {
  --espresso-bean-roam-1: #2F1B0C;
  --espresso-bean-roam-2: #4A2E1D;
  --espresso-bean-roam-3: #6B4C3D;
  --espresso-bean-roam-4: #907366;
  --espresso-bean-roam-5: #B59C90;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "espresso-bean-roam": {
        1: "#2F1B0C",
        2: "#4A2E1D",
        3: "#6B4C3D",
        4: "#907366",
        5: "#B59C90",
      }
    }
  }
}

Related searches

espresso brown gradientelegant coffee palettenatural warm brownssophisticated earthy tonescomforting taupe scheme

Palette colors

Hex values

Color 1#2F1B0C
·
Color 2#4A2E1D
·
Color 3#6B4C3D
·
Color 4#907366
·
Color 5#B59C90
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
3.8:1AA18
6.3:1AA
2
1.3:1Fail
1.6:1Fail
2.8:1Fail
4.8:1AA
3
2.1:1Fail
1.6:1Fail
1.8:1Fail
3:1Fail
4
3.8:1AA18
2.8:1Fail
1.8:1Fail
1.7:1Fail
5
6.3:1AA
4.8:1AA
3:1Fail
1.7:1Fail

Similar palettes

More like Espresso Bean Roam

View all dark
Coffee Bean Richness
Espresso Bean Roam
Espresso Roast Depth
Roasted Coffee Hues
Cacao Bean Reverie
Midnight Mocha Blend