Palette

Spiced Coffee Brew

Rich, comforting browns infused with warm spices, reminiscent of a freshly brewed coffee.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C3D2B#7F5E48#A38C7C#CFC6BC#4A3021

Palette guide

How to use Spiced Coffee Brew

Overview

The Spiced Coffee Brew palette offers a sophisticated and comforting range of deep, earthy browns and muted warm tones, reminiscent of a freshly brewed, spiced coffee. Featuring robust shades like #5C3D2B and #4A3021, it transitions through mid-tones such as #7F5E48 and #A38C7C, culminating in the soft, creamy #CFC6BC. This collection is ideal for creating designs that convey warmth, reliability, and natural elegance. Designers can leverage its harmonious progression to build inviting and professional visuals for various applications, from upscale branding to cozy digital interfaces, ensuring a grounded and refined aesthetic.

Best used for

High-end coffee shop or roastery branding
Luxury home decor and furniture e-commerce
Corporate branding seeking a sophisticated, earthy feel
Editorial design for travel or lifestyle content
Websites and apps with a minimalist, natural aesthetic
Packaging for gourmet foods or artisanal products

Suggested color roles

primary

Use #4A3021 as a deep, anchoring color for headers, important text, or strong brand elements, conveying stability.

secondary

Apply #5C3D2B for subheadings, navigation, or as a rich background for sections, offering a warm and grounded presence.

accent

Employ #7F5E48 for subtle highlights, interactive elements, or to add a touch of warmth without dominating.

background

Utilize #CFC6BC as a soft, inviting background for main content areas, ensuring excellent readability for darker text.

text

For body text, #4A3021 or a deep charcoal provides optimal contrast against lighter backgrounds like #CFC6BC, maintaining elegance.

Accessibility notes

Ensure high contrast when pairing #4A3021 or #5C3D2B with #CFC6BC for text and background.
Avoid using #A38C7C for small text on #7F5E48 backgrounds, as contrast may be insufficient.
For headings, #5C3D2B on #CFC6BC offers a sophisticated and readable combination.
All text should aim for WCAG AA contrast standards, especially critical for body copy.

Recommended combinations

Rich Roast

Ideal for premium branding or sophisticated digital interfaces, conveying depth and quality.

#4A3021 · #7F5E48 · #CFC6BC

Creamy Blend

Creates a soft, inviting atmosphere, perfect for lifestyle blogs or cozy e-commerce sites.

#5C3D2B · #A38C7C · #CFC6BC

Earthy Luxe

A grounded and elegant combination suitable for corporate or high-end product design.

#4A3021 · #5C3D2B · #CFC6BC

CSS variables

:root {
  --spiced-coffee-brew-1: #5C3D2B;
  --spiced-coffee-brew-2: #7F5E48;
  --spiced-coffee-brew-3: #A38C7C;
  --spiced-coffee-brew-4: #CFC6BC;
  --spiced-coffee-brew-5: #4A3021;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-coffee-brew": {
        1: "#5C3D2B",
        2: "#7F5E48",
        3: "#A38C7C",
        4: "#CFC6BC",
        5: "#4A3021",
      }
    }
  }
}

Hex values

Color 1#5C3D2B

Color 2#7F5E48

Color 3#A38C7C

Color 4#CFC6BC

Color 5#4A3021

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5.8:1AA

1.2:1Fail

1.7:1Fail

1.8:1Fail

3.5:1AA18

2.1:1Fail

3.1:1AA18

1.8:1Fail

1.9:1Fail

3.8:1AA18

5.8:1AA

3.5:1AA18

1.9:1Fail

7.2:1AAA

1.2:1Fail

2.1:1Fail

3.8:1AA18

7.2:1AAA

Similar palettes

More like Spiced Coffee Brew

View all warm

Barista's Brew Comfort