Back to palettes

Palette

Coffee Bean

A comforting array of rich, warm browns inspired by freshly brewed coffee and creamy espresso.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E342E#5D4037#6D4C41#8D6E63#A1887F

Palette guide

How to use Coffee Bean

Overview

The Coffee Bean palette offers a comforting array of rich, warm browns inspired by freshly brewed coffee and creamy espresso. With deep tones like #4E342E and #5D4037, alongside inviting mid-tones such as #8D6E63 and #A1887F, this palette exudes natural warmth and coziness. Designers can leverage these versatile browns to create inviting and grounded designs, perfect for conveying authenticity and comfort. Developers will appreciate the harmonious range, which allows for consistent branding and user-friendly interfaces across various applications, from food-related platforms to rustic e-commerce sites.

Best used for

  • Coffee shop and café branding
  • Artisanal food product packaging
  • Rustic and natural home decor
  • Lifestyle and wellness blogs
  • Cozy digital interfaces and apps
  • Earth-toned fashion accessories

Suggested color roles

primary

Use #4E342E for main headings, navigation, or key brand elements to establish a deep, rich foundation.

secondary

Apply #5D4037 or #6D4C41 for subheadings, buttons, or larger content blocks, adding warmth and depth.

accent

Introduce #8D6E63 or #A1887F for highlights, call-to-action buttons, or decorative elements to provide gentle contrast.

background

The lighter #A1887F offers a soft, inviting backdrop. For a deeper background, #4E342E can be used with light text.

text

Pair a dark color like #4E342E or #5D4037 with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

  • Ensure sufficient contrast when using lighter browns like #8D6E63 or #A1887F for text on similar backgrounds.
  • Darker shades such as #4E342E or #5D4037 provide excellent contrast for white or very light cream text.
  • Avoid pairing adjacent mid-tones for small text due to their proximity in value.
  • The palette offers a good range for contrast, but always test specific pairings for readability.

Recommended combinations

Espresso Blend

Creates a balanced and comforting aesthetic, ideal for brand identity or inviting website sections.

#4E342E · #6D4C41 · #A1887F

Warm Mocha

Perfect for backgrounds and content areas, offering a soft, natural, and harmonious feel.

#5D4037 · #8D6E63 · #A1887F

Rich Earth

Use for highlights and interactive elements, providing a pleasant contrast and warmth.

#4E342E · #5D4037 · #8D6E63

CSS variables

:root {
  --coffee-bean-1: #4E342E;
  --coffee-bean-2: #5D4037;
  --coffee-bean-3: #6D4C41;
  --coffee-bean-4: #8D6E63;
  --coffee-bean-5: #A1887F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-bean": {
        1: "#4E342E",
        2: "#5D4037",
        3: "#6D4C41",
        4: "#8D6E63",
        5: "#A1887F",
      }
    }
  }
}

Related searches

coffee brown color palettewarm earth tonesrich espresso colorsnatural cozy brownsrustic coffee scheme

Palette colors

Hex values

Color 1#4E342E
·
Color 2#5D4037
·
Color 3#6D4C41
·
Color 4#8D6E63
·
Color 5#A1887F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.4:1Fail
3.4:1AA18
2
1.2:1Fail
1.2:1Fail
2:1Fail
2.8:1Fail
3
1.5:1Fail
1.2:1Fail
1.6:1Fail
2.3:1Fail
4
2.4:1Fail
2:1Fail
1.6:1Fail
1.4:1Fail
5
3.4:1AA18
2.8:1Fail
2.3:1Fail
1.4:1Fail

Similar palettes

More like Coffee Bean

View all earth
Artisan Bread Crust
Aged Copper Patina
Aged Leather Comfort
Aged Timber Charm
Aged Wood Stain
Amber Sands Mirage