Palette

Coffee Shop Cozy

Warm, inviting browns and creams, perfect for a cozy afternoon in a quaint 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 Cozy 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 Cozy.

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

Data visualization

#5D4037#8D6E63#BCAAA4#EFEBE9#6B4C41

Palette guide

How to use Coffee Shop Cozy

Overview

The Coffee Shop Cozy palette (ID: coffee-shop-cozy-2) features warm, inviting browns and creams, perfect for a cozy afternoon in a quaint coffee shop. Ranging from the deep #5D4037 to the airy #EFEBE9, and including inviting mid-tones like #8D6E63 and #BCAAA4, 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 lifestyle blogs to cozy e-commerce platforms.

Best used for

Café and coffee shop branding
Lifestyle and home decor blogs
Interior design for cozy spaces
Cozy app interfaces
Handcrafted product packaging
Autumnal event marketing

Suggested color roles

primary

Use #5D4037 or #6B4C41 for main headings, navigation, or key brand elements to establish a deep, rich foundation.

secondary

Apply #8D6E63 or #BCAAA4 for subheadings, buttons, or larger content blocks, adding warmth and readability.

accent

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

background

The light #EFEBE9 offers a clean, creamy backdrop. For a deeper background, #5D4037 can be used with light text.

text

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

Accessibility notes

Ensure sufficient contrast when using lighter shades like #BCAAA4 or #EFEBE9 for text on similar backgrounds.
Darker shades such as #5D4037 or #6B4C41 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

Cozy Brew

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

#5D4037 · #BCAAA4 · #EFEBE9

Warm Cream

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

#8D6E63 · #BCAAA4 · #EFEBE9

Rich Layers

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

#5D4037 · #6B4C41 · #BCAAA4

CSS variables

:root {
  --coffee-shop-cozy-2-1: #5D4037;
  --coffee-shop-cozy-2-2: #8D6E63;
  --coffee-shop-cozy-2-3: #BCAAA4;
  --coffee-shop-cozy-2-4: #EFEBE9;
  --coffee-shop-cozy-2-5: #6B4C41;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-shop-cozy-2": {
        1: "#5D4037",
        2: "#8D6E63",
        3: "#BCAAA4",
        4: "#EFEBE9",
        5: "#6B4C41",
      }
    }
  }
}

Hex values

Color 1#5D4037

Color 2#8D6E63

Color 3#BCAAA4

Color 4#EFEBE9

Color 5#6B4C41

Accessibility

Contrast checker

2:1Fail

4.2:1AA18

7.9:1AAA

1.2:1Fail

2:1Fail

2.1:1Fail

3.9:1AA18

1.7:1Fail

4.2:1AA18

2.1:1Fail

1.9:1Fail

3.4:1AA18

7.9:1AAA

3.9:1AA18

1.9:1Fail

6.5:1AA

1.2:1Fail

1.7:1Fail

3.4:1AA18

6.5:1AA

Similar palettes

More like Coffee Shop Cozy

View all warm

Barista Roast Comfort