Back to palettes

Palette

Coffee Bean Aroma

A rich and comforting blend of browns, reminiscent of freshly roasted coffee beans.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6F4E37#8B4513#A0522D#B0826C#D2B48C

Palette guide

How to use Coffee Bean Aroma

Overview

The Coffee Bean Aroma palette (ID: coffee-bean-aroma) offers a rich and comforting blend of browns, reminiscent of freshly roasted coffee beans. Featuring the deep #6F4E37, the vibrant #8B4513, and the soothing #D2B48C, this palette is imbued with warmth and natural charm. Designers can leverage these earthy tones to evoke feelings of coziness, authenticity, and comfort, making it perfect for brands that want to feel inviting and grounded. Developers will find these shades versatile for creating welcoming digital spaces, from rustic e-commerce sites to comforting lifestyle blogs.

Best used for

  • Café and bakery branding
  • Natural and organic product packaging
  • Rustic home decor themes
  • Lifestyle and wellness blogs
  • Cozy app interfaces
  • Autumnal marketing campaigns

Suggested color roles

primary

Use #6F4E37 for main headings, navigation, or key brand elements to establish a warm, inviting presence.

secondary

Apply #8B4513 or #A0522D for subheadings, buttons, or larger content blocks, adding depth and richness.

accent

Introduce #D2B48C or #B0826C for highlights, call-to-action buttons, or decorative elements to provide gentle contrast.

background

The light #D2B48C offers a soft, creamy backdrop. For a deeper background, #6F4E37 can be used with light text.

text

Pair a dark color like #6F4E37 with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

  • Ensure sufficient contrast when using lighter browns like #B0826C or #D2B48C for text on similar backgrounds.
  • Darker shades such as #6F4E37 or #8B4513 provide excellent contrast for white or very light cream text.
  • Avoid pairing #8B4513 with #A0522D for small text due to their proximity in value.
  • Consider using an off-white or cream for text on the mid-tone browns for better legibility.

Recommended combinations

Roasted Blend

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

#6F4E37 · #A0522D · #D2B48C

Warm Earth

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

#8B4513 · #B0826C · #D2B48C

Cozy Accent

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

#6F4E37 · #B0826C · #D2B48C

CSS variables

:root {
  --coffee-bean-aroma-1: #6F4E37;
  --coffee-bean-aroma-2: #8B4513;
  --coffee-bean-aroma-3: #A0522D;
  --coffee-bean-aroma-4: #B0826C;
  --coffee-bean-aroma-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-bean-aroma": {
        1: "#6F4E37",
        2: "#8B4513",
        3: "#A0522D",
        4: "#B0826C",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

warm coffee brown palettecozy earth tonesnatural cafe colorscomforting brown schemerustic coffee palette

Palette colors

Hex values

Color 1#6F4E37
·
Color 2#8B4513
·
Color 3#A0522D
·
Color 4#B0826C
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.3:1Fail
2.2:1Fail
3.8:1AA18
2
1:1Fail
1.3:1Fail
2.1:1Fail
3.6:1AA18
3
1.3:1Fail
1.3:1Fail
1.7:1Fail
2.8:1Fail
4
2.2:1Fail
2.1:1Fail
1.7:1Fail
1.7:1Fail
5
3.8:1AA18
3.6:1AA18
2.8:1Fail
1.7:1Fail

Similar palettes

More like Coffee Bean Aroma

View all warm
Warm Coffee Brew
Barista's Brew Comfort
Cinnamon Stick Brew
Spiced Coffee Brew
Warm Mocha Dream
Amber Apothecary Jar