Back to palettes

Palette

Coffee Shop Cozy

Rich browns and creamy tans create a comforting, aromatic atmosphere, perfect for a relaxing coffee break.

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

#6F4E37#8B4513#A0522D#D2B48C#DEB887

Palette guide

How to use Coffee Shop Cozy

Overview

The Coffee Shop Cozy palette (ID: coffee-shop-cozy) features rich browns and creamy tans, creating a comforting, aromatic atmosphere, perfect for a relaxing coffee break. Ranging from the deep #6F4E37 to the inviting #DEB887, and including warm mid-tones like #8B4513 and #A0522D, this palette exudes natural warmth and calm. Designers can leverage these versatile earth 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 rustic e-commerce sites to comforting lifestyle blogs.

Best used for

  • Café and coffee shop branding
  • Food packaging and gourmet products
  • Rustic home decor and furniture
  • Lifestyle photography and blogs
  • Cozy app interfaces
  • Natural product lines

Suggested color roles

primary

Use #6F4E37 or #8B4513 for main headings, navigation, or key brand elements to establish a deep, rich foundation.

secondary

Apply #A0522D or #D2B48C for subheadings, buttons, or larger content blocks, adding warmth and readability.

accent

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

background

The light #D2B48C or #DEB887 offers a clean, creamy backdrop. For a deeper background, #6F4E37 can be used with light text.

text

Pair a dark color like #6F4E37 or #8B4513 with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #D2B48C or #DEB887 for text on similar backgrounds.
  • Darker shades such as #6F4E37 or #8B4513 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

Warm Roast

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

#6F4E37 · #A0522D · #DEB887

Creamy Tan

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

#8B4513 · #D2B48C · #DEB887

Rich Earth

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

#6F4E37 · #8B4513 · #D2B48C

CSS variables

:root {
  --coffee-shop-cozy-1: #6F4E37;
  --coffee-shop-cozy-2: #8B4513;
  --coffee-shop-cozy-3: #A0522D;
  --coffee-shop-cozy-4: #D2B48C;
  --coffee-shop-cozy-5: #DEB887;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-shop-cozy": {
        1: "#6F4E37",
        2: "#8B4513",
        3: "#A0522D",
        4: "#D2B48C",
        5: "#DEB887",
      }
    }
  }
}

Related searches

cozy coffee palettewarm brown taninviting cafe colorsrustic earth tonescomforting design scheme

Palette colors

Hex values

Color 1#6F4E37
·
Color 2#8B4513
·
Color 3#A0522D
·
Color 4#D2B48C
·
Color 5#DEB887
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.3:1Fail
3.8:1AA18
4:1AA18
2
1:1Fail
1.3:1Fail
3.6:1AA18
3.8:1AA18
3
1.3:1Fail
1.3:1Fail
2.8:1Fail
3:1AA18
4
3.8:1AA18
3.6:1AA18
2.8:1Fail
1.1:1Fail
5
4:1AA18
3.8:1AA18
3:1AA18
1.1:1Fail

Similar palettes

More like Coffee Shop Cozy

View all warm
Barista Brew Comfort
Barista Roast Comfort
Cafe Latte Comfort
Caramel Latte Dream
Cinnamon Toast Cozy
Coffee House Corner