Palette

Coffee House Corner

Rich, comforting browns and creamy accents, like the inviting aromas and cozy ambiance of a warm coffee house.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coffee House Corner 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 House Corner.

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

Data visualization

#4F2E1A#8F5933#C48757#E4B78D#F0E7DB

Palette guide

How to use Coffee House Corner

Overview

The Coffee House Corner palette features rich, comforting browns and creamy accents, like the inviting aromas and cozy ambiance of a warm coffee house. Ranging from the deep #4F2E1A to the airy #F0E7DB, and including inviting mid-tones like #8F5933 and #E4B78D, 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 rustic e-commerce sites to comforting lifestyle blogs.

Best used for

Café and coffee shop branding
Artisanal food product packaging
Rustic and natural home decor
Lifestyle and wellness blogs
Cozy digital interfaces and apps
Autumnal event marketing

Suggested color roles

primary

Use #4F2E1A for main headings, navigation, or key brand elements to establish a deep, rich foundation.

secondary

Apply #8F5933 or #C48757 for subheadings, buttons, or larger content blocks, adding warmth and depth.

accent

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

background

The light #F0E7DB offers a clean, creamy backdrop. For a deeper background, #4F2E1A can be used with light text.

text

Pair a dark color like #4F2E1A or #8F5933 with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

Ensure sufficient contrast when using lighter shades like #E4B78D or #F0E7DB for text on similar backgrounds.
Darker shades such as #4F2E1A or #8F5933 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 Brew

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

#4F2E1A · #C48757 · #F0E7DB

Creamy Comfort

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

#8F5933 · #E4B78D · #F0E7DB

Rich Layers

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

#4F2E1A · #8F5933 · #E4B78D

CSS variables

:root {
  --coffee-house-corner-1: #4F2E1A;
  --coffee-house-corner-2: #8F5933;
  --coffee-house-corner-3: #C48757;
  --coffee-house-corner-4: #E4B78D;
  --coffee-house-corner-5: #F0E7DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-house-corner": {
        1: "#4F2E1A",
        2: "#8F5933",
        3: "#C48757",
        4: "#E4B78D",
        5: "#F0E7DB",
      }
    }
  }
}

Hex values

Color 1#4F2E1A

Color 2#8F5933

Color 3#C48757

Color 4#E4B78D

Color 5#F0E7DB

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

6.6:1AA

9.9:1AAA

2.1:1Fail

1.9:1Fail

3.1:1AA18

4.7:1AA

4:1AA18

1.9:1Fail

1.6:1Fail

2.5:1Fail