Back to palettes

Palette

Roasted Coffee Bean

Rich, aromatic shades capturing the deep warmth and inviting comfort 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 Roasted 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 Roasted Coffee Bean.

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

Data visualization

#3B2A22#5C4A3A#7A6250#9C7E68#B99D8B

Palette guide

How to use Roasted Coffee Bean

Overview

The Roasted Coffee Bean palette presents rich, aromatic shades that capture the deep warmth and inviting comfort of freshly roasted coffee beans. Ranging from the profound #3B2A22 to the gentle #B99D8B, this collection of browns is perfect for designers and developers aiming to evoke a sense of coziness and natural authenticity. The mid-tones like #7A6250 provide excellent versatility for various design elements, ensuring harmony and depth. This palette is an ideal choice for projects that require a warm, earthy, and comforting aesthetic, from digital interfaces to physical product branding, celebrating the robust character of coffee.

Best used for

  • Coffee brand packaging and marketing
  • Rustic website themes and blog design
  • Cozy cafe and restaurant interiors
  • Autumn-themed designs and campaigns
  • Comfort food and beverage branding
  • Natural and organic product lines

Suggested color roles

primary

#3B2A22 - A profound, dark brown, establishing a strong, comforting base for branding or large UI sections.

secondary

#5C4A3A - A rich, warm brown, excellent for subheadings, navigation elements, or complementary content blocks.

accent

#7A6250 - A versatile mid-tone brown, perfect for highlights, interactive elements, or decorative patterns.

background

#B99D8B - A soft, inviting light brown, providing a gentle and warm canvas for any design.

text

#3B2A22 - The darkest shade ensures optimal readability for body text and headings against lighter backgrounds.

Accessibility notes

  • Ensure #3B2A22 text has good contrast on #B99D8B to meet WCAG accessibility guidelines.
  • Avoid using #9C7E68 for small text on #B99D8B due to potential readability issues and insufficient contrast.
  • For all essential text elements, prioritize using the darkest browns to ensure maximum readability.
  • For text on dark backgrounds like #3B2A22, use a near-white or very light cream for strong contrast.

Recommended combinations

Deep Roast

For a classic, robust coffee aesthetic, ideal for headlines, main visuals, and strong branding.

#3B2A22 · #7A6250 · #B99D8B

Cozy Blend

Creates a softer, more inviting atmosphere, suitable for background textures or larger content blocks.

#5C4A3A · #9C7E68 · #B99D8B

Earthy Depth

Layers the deeper browns for a sophisticated, warm, and grounded feel in branding and graphic design.

#3B2A22 · #5C4A3A · #7A6250

CSS variables

:root {
  --roasted-coffee-bean-1: #3B2A22;
  --roasted-coffee-bean-2: #5C4A3A;
  --roasted-coffee-bean-3: #7A6250;
  --roasted-coffee-bean-4: #9C7E68;
  --roasted-coffee-bean-5: #B99D8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "roasted-coffee-bean": {
        1: "#3B2A22",
        2: "#5C4A3A",
        3: "#7A6250",
        4: "#9C7E68",
        5: "#B99D8B",
      }
    }
  }
}

Related searches

coffee bean color schemewarm brown earthy palettecozy cafe colorsnatural roasted browncomfort food branding colors

Palette colors

Hex values

Color 1#3B2A22
·
Color 2#5C4A3A
·
Color 3#7A6250
·
Color 4#9C7E68
·
Color 5#B99D8B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.6:1AA18
5.4:1AA
2
1.6:1Fail
1.5:1Fail
2.2:1Fail
3.3:1AA18
3
2.4:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3.6:1AA18
2.2:1Fail
1.5:1Fail
1.5:1Fail
5
5.4:1AA
3.3:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Roasted Coffee Bean

View all warm
Artisan Bread Hearth
Spiced Coffee Brew
Artisan Coffee Blend
Autumn Harvest Hearth
Autumn Hearth Fire
Autumn Hearth Spice