Palette

Mellow Coffee Cream

A comforting blend of rich browns and creamy tans, perfect for a cozy coffee break.

Warmcalm5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#D2B48C#F5DEB3#5A2C0F#A0522D

Palette guide

How to use Mellow Coffee Cream

Overview

The Mellow Coffee Cream palette offers a comforting and sophisticated blend of rich browns and creamy tans, reminiscent of a cozy coffee shop. This warm collection, featuring shades like #8B4513 (Saddle Brown), #D2B48C (Tan), and #F5DEB3 (Wheat), is ideal for designs aiming for an inviting, natural, and calm ambiance. Developers and designers can utilize its harmonious tones to create welcoming user interfaces, elegant branding, or serene digital spaces. With #5A2C0F (a deep brown) and #A0522D (Sienna) providing grounding depth, this palette offers excellent versatility for a comforting aesthetic.

Best used for

Cafe and coffee shop branding and interiors
Cozy lifestyle blogs and websites
Natural and organic product packaging
Home decor and furniture marketing
Inviting user interfaces for relaxation apps
Warm, earthy photography backdrops

Suggested color roles

primary

Use #8B4513 as the dominant brown for large sections, headers, or branding to establish a rich, comforting base.

secondary

Employ #D2B48C for secondary elements, adding a creamy, soft touch that balances the deeper browns.

accent

Apply #A0522D as a warm, earthy accent for important details, buttons, or graphic elements, providing subtle contrast.

background

Utilize #F5DEB3 for clean, airy backgrounds, creating an inviting and light canvas that enhances readability.

text

For primary text, #5A2C0F offers excellent contrast and a rich, readable brown; consider a lighter shade for subheadings.

Accessibility notes

Ensure #5A2C0F or a similar dark brown is used for text on #F5DEB3 and #D2B48C to meet contrast requirements.
Avoid placing light text on #D2B48C without careful contrast checking; darker text is generally safer.
Use a consistent dark text color throughout to maintain readability, especially against varying light backgrounds.
When designing forms, ensure input fields use sufficient contrast for borders and placeholder text against the background.

Recommended combinations

Rich Brew

Ideal for creating a deep, luxurious coffee-inspired feel in branding, headers, or elegant graphic elements.

#8B4513 · #5A2C0F · #D2B48C

Creamy Blend

Perfect for soft, inviting backgrounds, accentuating creamy textures, or for subtle UI components.

#F5DEB3 · #D2B48C · #A0522D

Earthy Comfort

Great for establishing a balanced, natural, and comforting aesthetic, suitable for web layouts or product showcases.

#8B4513 · #F5DEB3 · #A0522D

CSS variables

:root {
  --mellow-coffee-cream-1: #8B4513;
  --mellow-coffee-cream-2: #D2B48C;
  --mellow-coffee-cream-3: #F5DEB3;
  --mellow-coffee-cream-4: #5A2C0F;
  --mellow-coffee-cream-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mellow-coffee-cream": {
        1: "#8B4513",
        2: "#D2B48C",
        3: "#F5DEB3",
        4: "#5A2C0F",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#D2B48C

Color 3#F5DEB3

Color 4#5A2C0F

Color 5#A0522D

Accessibility

Contrast checker

3.6:1AA18

5.4:1AA

1.6:1Fail

1.3:1Fail

3.6:1AA18

1.5:1Fail

5.9:1AA

2.8:1Fail

5.4:1AA

1.5:1Fail

8.9:1AAA

4.3:1AA18

1.6:1Fail

5.9:1AA

8.9:1AAA

2.1:1Fail

1.3:1Fail

2.8:1Fail

4.3:1AA18

2.1:1Fail

Similar palettes

More like Mellow Coffee Cream

Barista Roast Comfort