Back to palettes

Palette

Coffee Break

Rich and inviting browns capture the comforting aroma and varying shades of a perfect cup of 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

#4A2C2A#6F4E37#967C6B#C7A88F#E8D1BB

Palette guide

How to use Coffee Break

Overview

The Coffee Break palette (ID: coffee-break) features rich and inviting browns that capture the comforting aroma and varying shades of a perfect cup of coffee. Ranging from the deep #4A2C2A to the creamy #E8D1BB, and including inviting mid-tones like #967C6B and #C7A88F, this palette exudes warmth and calm. 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 lifestyle blogs to cozy e-commerce platforms.

Best used for

  • Café and coffee shop branding
  • Artisanal food product packaging
  • Lifestyle and wellness blogs
  • Cozy app interfaces
  • Interior design for comforting spaces
  • Autumnal marketing campaigns

Suggested color roles

primary

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

secondary

Apply #6F4E37 or #967C6B for subheadings, navigation, or larger content blocks, adding warmth and readability.

accent

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

background

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

text

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

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #C7A88F or #E8D1BB for text on similar backgrounds.
  • Darker shades such as #4A2C2A or #6F4E37 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

Rich Mocha

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

#4A2C2A · #967C6B · #E8D1BB

Warm Cream

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

#6F4E37 · #C7A88F · #E8D1BB

Inviting Blend

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

#4A2C2A · #6F4E37 · #C7A88F

CSS variables

:root {
  --coffee-break-1: #4A2C2A;
  --coffee-break-2: #6F4E37;
  --coffee-break-3: #967C6B;
  --coffee-break-4: #C7A88F;
  --coffee-break-5: #E8D1BB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-break": {
        1: "#4A2C2A",
        2: "#6F4E37",
        3: "#967C6B",
        4: "#C7A88F",
        5: "#E8D1BB",
      }
    }
  }
}

Related searches

coffee brown shadesinviting warm palettemocha color schemecozy coffee tonescomforting earth hues

Palette colors

Hex values

Color 1#4A2C2A
·
Color 2#6F4E37
·
Color 3#967C6B
·
Color 4#C7A88F
·
Color 5#E8D1BB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.2:1AA18
5.6:1AA
8.5:1AAA
2
1.7:1Fail
1.9:1Fail
3.3:1AA18
5.1:1AA
3
3.2:1AA18
1.9:1Fail
1.7:1Fail
2.6:1Fail
4
5.6:1AA
3.3:1AA18
1.7:1Fail
1.5:1Fail
5
8.5:1AAA
5.1:1AA
2.6:1Fail
1.5:1Fail

Similar palettes

More like Coffee Break

View all neutral
Coffee Bean Roast
Cozy Espresso Nook
Espresso Roast Dream
Mocha Morning Brew
Fireside Retreat Charm
Morning Brew Cafe