Palette

Coffee Bean Roast

A comforting palette of rich browns, like roasted coffee beans and creamy lattes, evoking warmth.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A2F2B#5F4C45#8F776B#B8A699#D9CFC7

Palette guide

How to use Coffee Bean Roast

Overview

The Coffee Bean Roast palette is a comforting collection of rich browns, like roasted coffee beans and creamy lattes, evoking warmth and calm. Ranging from the deep #3A2F2B to the airy #D9CFC7, and featuring inviting mid-tones like #8F776B and #B8A699, this palette offers versatility for creating cozy and sophisticated designs. Designers can use these earthy, warm neutrals to build inviting digital and physical spaces. Developers will appreciate the excellent contrast range, enabling clear readability and harmonious UI elements for various applications, from lifestyle blogs to e-commerce sites.

Best used for

Café and coffee shop branding
Natural and organic product lines
Lifestyle and home decor blogs
Cozy e-commerce websites
Autumnal event marketing
Comfort-focused app interfaces

Suggested color roles

primary

Use #3A2F2B for dominant elements like headers, footers, or main brand colors to establish a deep, grounding presence.

secondary

Apply #5F4C45 or #8F776B for subheadings, navigation, or larger content blocks, adding warmth and readability.

accent

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

background

The light #D9CFC7 offers a clean, creamy backdrop. For a deeper background, #3A2F2B can be used with light text.

text

Pair a dark color like #3A2F2B or #5F4C45 with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

Ensure sufficient contrast when using lighter shades like #B8A699 or #D9CFC7 for text on similar backgrounds.
Darker shades such as #3A2F2B or #5F4C45 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 range from dark to light allows for good contrast, but always test specific pairings for readability.

Recommended combinations

Latte Blend

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

#3A2F2B · #8F776B · #D9CFC7

Warm Neutral

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

#5F4C45 · #B8A699 · #D9CFC7

Rich Contrast

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

#3A2F2B · #5F4C45 · #B8A699

CSS variables

:root {
  --coffee-bean-roast-1: #3A2F2B;
  --coffee-bean-roast-2: #5F4C45;
  --coffee-bean-roast-3: #8F776B;
  --coffee-bean-roast-4: #B8A699;
  --coffee-bean-roast-5: #D9CFC7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-bean-roast": {
        1: "#3A2F2B",
        2: "#5F4C45",
        3: "#8F776B",
        4: "#B8A699",
        5: "#D9CFC7",
      }
    }
  }
}

Hex values

Color 1#3A2F2B

Color 2#5F4C45

Color 3#8F776B

Color 4#B8A699

Color 5#D9CFC7

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

5.5:1AA

8.4:1AAA

1.6:1Fail

1.9:1Fail

3.4:1AA18

5.3:1AA

3.1:1AA18

1.9:1Fail

1.8:1Fail

2.7:1Fail

5.5:1AA

3.4:1AA18

1.8:1Fail

1.5:1Fail

8.4:1AAA

5.3:1AA

2.7:1Fail

1.5:1Fail

Similar palettes

More like Coffee Bean Roast