Back to palettes

Palette

Roast Coffee Bean

Captures the rich, inviting aroma and warm, deep tones of freshly roasted coffee beans, a true morning comfort.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4f2c0c#6b4423#8a5c3a#aa785c#c9947f

Palette guide

How to use Roast Coffee Bean

Overview

The Roast Coffee Bean palette captures the rich, inviting aroma and warm, deep tones of freshly roasted coffee, embodying true morning comfort. This earthy collection ranges from the dark #4f2c0c to the lighter, comforting #c9947f. Designers and developers can utilize these versatile browns to create cozy, grounded, and authentic digital or physical experiences. The mid-tones like #8a5c3a provide excellent balance, making this palette perfect for conveying warmth, naturalness, and a sense of artisan quality. It's an ideal choice for projects seeking to evoke a comforting, rustic, or organic aesthetic with a robust character.

Best used for

  • Coffee shop branding and interior design
  • Cozy blog themes and editorial layouts
  • Rustic interior decor and home goods
  • Natural product packaging and labels
  • Autumnal marketing materials and campaigns
  • Comfort food and beverage branding

Suggested color roles

primary

#4f2c0c - A deep, rich coffee brown, excellent for primary branding elements, headers, or robust backgrounds.

secondary

#6b4423 - A warm, inviting brown, perfect for complementary sections, buttons, or decorative accents.

accent

#8a5c3a - A pleasant mid-tone brown that can highlight important information, illustrations, or interactive elements.

background

#c9947f - A soft, light brown, providing a warm, comforting, and approachable canvas for designs.

text

#4f2c0c - The darkest shade offers optimal readability for body text and headings against lighter brown or cream backgrounds.

Accessibility notes

  • Ensure #4f2c0c text has strong contrast on #c9947f for optimal readability, meeting WCAG AA standards.
  • Avoid using #aa785c for small text on #c9947f due to insufficient contrast, which can hinder legibility.
  • Use the darkest browns, like #4f2c0c, for critical information to maintain high readability across the palette.
  • Consider a near-white or very light cream for text on the darkest brown backgrounds, such as #4f2c0c.

Recommended combinations

Morning Brew

Creates a classic coffee shop vibe, ideal for branding, main content, and inviting visuals.

#4F2C0C · #8A5C3A · #C9947F

Warm Embrace

For a softer, cozy feel, suitable for inviting backgrounds, editorial layouts, and subtle textures.

#6B4423 · #AA785C · #C9947F

Rich Earth

Layers deep and mid-tones for a sophisticated, earthy depth in branding and graphic elements.

#4F2C0C · #6B4423 · #AA785C

CSS variables

:root {
  --roast-coffee-bean-1: #4f2c0c;
  --roast-coffee-bean-2: #6b4423;
  --roast-coffee-bean-3: #8a5c3a;
  --roast-coffee-bean-4: #aa785c;
  --roast-coffee-bean-5: #c9947f;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "roast-coffee-bean": {
        1: "#4f2c0c",
        2: "#6b4423",
        3: "#8a5c3a",
        4: "#aa785c",
        5: "#c9947f",
      }
    }
  }
}

Related searches

coffee brown color palettewarm earthy tonesrustic brown schemecozy coffee colorsnatural comfort palette

Palette colors

Hex values

Color 1#4f2c0c
·
Color 2#6b4423
·
Color 3#8a5c3a
·
Color 4#aa785c
·
Color 5#c9947f
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3.3:1AA18
4.7:1AA
2
1.5:1Fail
1.5:1Fail
2.2:1Fail
3.2:1AA18
3
2.2:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3.3:1AA18
2.2:1Fail
1.5:1Fail
1.4:1Fail
5
4.7:1AA
3.2:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Roast Coffee Bean

View all earth