Palette

Gourmet Coffee House

A comforting and sophisticated palette, inspired by the rich aromas of a specialty coffee shop.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#362214#C2B280#A8A8A8#8B4513#7B3F00

Palette guide

How to use Gourmet Coffee House

Overview

The Gourmet Coffee House palette brews a comforting and sophisticated atmosphere, inspired by the rich aromas of a specialty coffee shop. It combines deep coffee browns like #362214 and #7B3F00 with the warmth of #8B4513, and balances them with the neutral #A8A8A8 (gray) and the creamy #C2B280. This palette is ideal for designers aiming to evoke coziness, artisanal quality, and a welcoming ambiance. These hex codes are perfect for branding related to cafes, culinary arts, or any digital interface that benefits from a warm, professional, and inviting aesthetic. Developers will find it excellent for creating a consistent and appealing user experience.

Best used for

Coffee shop branding and menus
Bakery and patisserie websites
Artisanal food product packaging
Cozy blog and lifestyle content
Hospitality and interior design concepts
Professional yet inviting app interfaces

Suggested color roles

primary

Use #362214 as a deep, anchoring primary color for backgrounds, headers, or foundational structural elements, establishing a cozy base.

secondary

Apply #8B4513 for supporting content blocks, navigation bars, or secondary features, offering a rich, warm complementary tone.

accent

Employ #C2B280 sparingly for soft highlights, interactive elements, or subtle graphic details to add a touch of creamy contrast.

background

Choose #A8A8A8 for a clean, neutral background, or #362214 for a deeper, more immersive setting.

text

Utilize #7B3F00 for headings and important text on lighter backgrounds like #C2B280 or #A8A8A8, ensuring excellent readability.

Accessibility notes

Ensure sufficient contrast for text on backgrounds, especially using #7B3F00 on #C2B280 or #A8A8A8.
Verify that interactive elements using #C2B280 have adequate contrast against #362214 or #8B4513.
Avoid using #362214 as text on #8B4513, as the contrast will be insufficient for readability.
For body text on #362214, use a light cream or white for optimal readability.

Recommended combinations

Cozy Brew

Excellent for website headers, menu designs, or product displays, providing a warm and inviting visual.

#362214 · #8B4513 · #C2B280

Modern Cafe

Ideal for clean layouts, UI elements, or subtle background patterns where sophistication meets comfort.

#A8A8A8 · #7B3F00 · #C2B280

Rich Contrast

Perfect for creating layered backgrounds, navigation bars, or data visualizations that emphasize depth and clarity.

#362214 · #A8A8A8 · #8B4513

CSS variables

:root {
  --gourmet-coffee-house-1: #362214;
  --gourmet-coffee-house-2: #C2B280;
  --gourmet-coffee-house-3: #A8A8A8;
  --gourmet-coffee-house-4: #8B4513;
  --gourmet-coffee-house-5: #7B3F00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gourmet-coffee-house": {
        1: "#362214",
        2: "#C2B280",
        3: "#A8A8A8",
        4: "#8B4513",
        5: "#7B3F00",
      }
    }
  }
}

Hex values

Color 1#362214

Color 2#C2B280

Color 3#A8A8A8

Color 4#8B4513

Color 5#7B3F00

Accessibility

Contrast checker

7.1:1AAA

6.3:1AA

2.1:1Fail

1.8:1Fail

7.1:1AAA

1.1:1Fail

3.4:1AA18

3.9:1AA18

6.3:1AA

1.1:1Fail

3:1Fail

3.5:1AA18

2.1:1Fail

3.4:1AA18

3:1Fail

1.2:1Fail

1.8:1Fail

3.9:1AA18

3.5:1AA18

1.2:1Fail

Similar palettes

More like Gourmet Coffee House

View all warm

Barista Brew Comfort

Barista Roast Comfort