Palette

Warm Bean Roast

Evokes the comforting aroma and deep, inviting colors of freshly roasted coffee beans and a warm brew.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warm Bean Roast 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 Warm Bean Roast.

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

Data visualization

#4D2B1F#724734#A26C4E#DDC9B6#B38C6F

Palette guide

How to use Warm Bean Roast

Overview

The "Warm Bean Roast" palette is a comforting collection of rich, earthy tones inspired by freshly roasted coffee beans and cozy interiors. Featuring deep browns like #4D2B1F and #724734, alongside warmer hues such as #A26C4E and #B38C6F, it culminates in the soft, inviting beige of #DDC9B6. This palette is ideal for creating designs that feel grounded, luxurious, and welcoming. Designers and developers can leverage its natural warmth to evoke feelings of relaxation and authenticity, perfect for brands seeking a sophisticated yet approachable aesthetic. The diverse range allows for excellent contrast and visual hierarchy, from dark statements to gentle highlights.

Best used for

Coffee shop branding and website design
Cozy interior design concepts and home decor e-commerce
Gourmet food packaging and artisanal product branding
Luxury lifestyle blogs and wellness platforms
Autumn/winter fashion collections and editorial layouts
Natural product lines, like organic cosmetics or sustainable goods

Suggested color roles

primary

#4D2B1F (Deep Coffee Brown) - Best used for dominant elements like navigation bars, footers, main headlines, or large background sections where a strong, grounding presence is desired.

secondary

#724734 (Roasted Bean Brown) - Excellent for subheadings, buttons, significant call-to-action elements, or as a supporting background color to add depth without being overly dark.

accent

#A26C4E (Warm Caramel Brown) - Ideal for highlighting key information, interactive elements like links and buttons, or small decorative details to add a touch of inviting warmth and visual interest.

background

#DDC9B6 (Latte Foam Beige) - Provides a soft, clean, and inviting canvas for content. Perfect for main body backgrounds, card elements, or as a light base for text.

text

#4D2B1F (Deep Coffee Brown) - Highly recommended for primary body text on light backgrounds like #DDC9B6 to ensure optimal readability and maintain the palette's warm, rich feel. A near-black or charcoal can also be used for maximum contrast.

Accessibility notes

Ensure #4D2B1F or #724734 is used for body text against #DDC9B6 for WCAG AA contrast compliance.
Avoid placing #B38C6F directly on #A26C4E for text, as their similar luminance can hinder readability.
Use #A26C4E or #B38C6F as accent colors for interactive elements, ensuring they have sufficient contrast against their surrounding background.
Consider providing an alternative 'dark mode' option using #4D2B1F or #724734 as a background with very light text for users sensitive to light interfaces.

Recommended combinations

Deep Roast Contrast

Excellent for high-contrast interfaces, where #4D2B1F provides a strong base, #DDC9B6 offers clean content areas, and #A26C4E highlights interactive elements.

#4D2B1F · #DDC9B6 · #A26C4E

Cozy Earth Tones

Ideal for creating a soft, warm, and inviting aesthetic. Use #724734 for headers, #B38C6F for secondary information, and #DDC9B6 as a background.

#724734 · #B38C6F · #DDC9B6

Rich Accent Blend

Perfect for showcasing depth and warmth. #4D2B1F as a main background, #A26C4E for highlighted features or call-outs, and #724734 for supporting text or design elements.

#4D2B1F · #A26C4E · #724734

CSS variables

:root {
  --warm-bean-roast-1: #4D2B1F;
  --warm-bean-roast-2: #724734;
  --warm-bean-roast-3: #A26C4E;
  --warm-bean-roast-4: #DDC9B6;
  --warm-bean-roast-5: #B38C6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-bean-roast": {
        1: "#4D2B1F",
        2: "#724734",
        3: "#A26C4E",
        4: "#DDC9B6",
        5: "#B38C6F",
      }
    }
  }
}

Hex values

Color 1#4D2B1F

Color 2#724734

Color 3#A26C4E

Color 4#DDC9B6

Color 5#B38C6F

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

7.8:1AAA

4.1:1AA18

1.6:1Fail

1.8:1Fail

4.9:1AA

2.6:1Fail

2.9:1Fail

1.8:1Fail

2.7:1Fail

1.4:1Fail

7.8:1AAA

4.9:1AA

2.7:1Fail

1.9:1Fail

4.1:1AA18

2.6:1Fail

1.4:1Fail

1.9:1Fail

Similar palettes

More like Warm Bean Roast

View all warm

Barista Brew Comfort

Barista Roast Comfort