Palette

Coffee Shop Buzz

Rich browns and comforting creams, evoking the warm, aromatic atmosphere of a bustling coffee shop.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3E2723#6D4C41#A1887F#D7CCC8#5A3B31

Palette guide

How to use Coffee Shop Buzz

Overview

The Coffee Shop Buzz palette features rich browns and comforting creams, evoking the warm, aromatic atmosphere of a bustling coffee shop. Ranging from the deep #3E2723 to the airy #D7CCC8, and including inviting mid-tones like #6D4C41 and #A1887F, this palette exudes natural warmth and calm. Designers can leverage these versatile tones to create sophisticated and serene digital and physical spaces. Developers will appreciate the excellent contrast range, ensuring clear readability and harmonious UI elements across various applications, from urban-themed websites to cozy e-commerce platforms.

Best used for

Café and coffee shop branding
Lifestyle photography and blogs
Interior design for cozy spaces
Food and beverage packaging
Cozy app interfaces
Urban-themed digital experiences

Suggested color roles

primary

Use #3E2723 for main headings, navigation, or key brand elements to establish a deep, grounding presence.

secondary

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

accent

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

background

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

text

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

Accessibility notes

Ensure sufficient contrast when using lighter shades like #A1887F or #D7CCC8 for text on similar backgrounds.
Darker shades such as #3E2723 or #5A3B31 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

Buzzing Brew

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

#3E2723 · #6D4C41 · #D7CCC8

Creamy Mocha

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

#5A3B31 · #A1887F · #D7CCC8

Rich Layers

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

#3E2723 · #5A3B31 · #A1887F

CSS variables

:root {
  --coffee-shop-buzz-1: #3E2723;
  --coffee-shop-buzz-2: #6D4C41;
  --coffee-shop-buzz-3: #A1887F;
  --coffee-shop-buzz-4: #D7CCC8;
  --coffee-shop-buzz-5: #5A3B31;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-shop-buzz": {
        1: "#3E2723",
        2: "#6D4C41",
        3: "#A1887F",
        4: "#D7CCC8",
        5: "#5A3B31",
      }
    }
  }
}

Hex values

Color 1#3E2723

Color 2#6D4C41

Color 3#A1887F

Color 4#D7CCC8

Color 5#5A3B31

Accessibility

Contrast checker

1.8:1Fail

4.2:1AA18

8.8:1AAA

1.4:1Fail

1.8:1Fail

2.3:1Fail

4.8:1AA

1.3:1Fail

4.2:1AA18

2.3:1Fail

2.1:1Fail

3:1AA18

8.8:1AAA

4.8:1AA

2.1:1Fail

6.3:1AA

1.4:1Fail

1.3:1Fail

3:1AA18

6.3:1AA

Similar palettes

More like Coffee Shop Buzz

View all warm

Barista Roast Comfort