Palette

Coffee Break

Rich browns and creamy beiges replicate the comforting warmth and layered hues of a perfect coffee.

NeutralCalm5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#362A26#5C4B44#7F6A5B#B6A79B#D2C4B7

Palette guide

How to use Coffee Break

Overview

The Coffee Break palette (ID: coffee-break-2) features rich browns and creamy beiges that replicate the comforting warmth and layered hues of a perfect coffee. Ranging from the deep #362A26 to the airy #D2C4B7, and including inviting mid-tones like #7F6A5B and #B6A79B, this palette is both calming and minimal. Designers can leverage these versatile neutrals 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 minimalist websites to cozy e-commerce platforms.

Best used for

Café and coffee shop branding
Minimalist website design
Interior design for cozy spaces
Lifestyle and wellness blogs
Cozy app interfaces
Natural product packaging

Suggested color roles

primary

Use #362A26 for dominant elements like headers, footers, or main brand colors to establish a deep, grounding presence.

secondary

Apply #5C4B44 or #7F6A5B for subheadings, navigation, or larger content blocks, adding warmth and readability.

accent

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

background

The light #D2C4B7 offers a clean, creamy backdrop. For a deeper background, #362A26 can be used with light text.

text

Pair a dark color like #362A26 or #5C4B44 with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

Ensure sufficient contrast when using lighter shades like #B6A79B or #D2C4B7 for text on similar backgrounds.
Darker shades such as #362A26 or #5C4B44 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

Coffee Layers

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

#362A26 · #7F6A5B · #D2C4B7

Warm Beige

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

#5C4B44 · #B6A79B · #D2C4B7

Minimal Contrast

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

#362A26 · #5C4B44 · #B6A79B

CSS variables

:root {
  --coffee-break-2-1: #362A26;
  --coffee-break-2-2: #5C4B44;
  --coffee-break-2-3: #7F6A5B;
  --coffee-break-2-4: #B6A79B;
  --coffee-break-2-5: #D2C4B7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-break-2": {
        1: "#362A26",
        2: "#5C4B44",
        3: "#7F6A5B",
        4: "#B6A79B",
        5: "#D2C4B7",
      }
    }
  }
}

Hex values

Color 1#362A26

Color 2#5C4B44

Color 3#7F6A5B

Color 4#B6A79B

Color 5#D2C4B7

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

5.9:1AA

8.1:1AAA

1.7:1Fail

1.6:1Fail

3.5:1AA18

4.8:1AA

2.7:1Fail

1.6:1Fail

2.2:1Fail

3:1Fail

5.9:1AA

3.5:1AA18

2.2:1Fail

1.4:1Fail

8.1:1AAA

4.8:1AA

3:1Fail

1.4:1Fail

Similar palettes

More like Coffee Break

View all Neutral

Cozy Bookstore Corner

Dusty Bookstack Beige

Ancient Temple Serene

Coastal Stone Hearth

Coffee Cream Blend

Pebble Shore Drift