Palette

Rainy Day Coffee

Comforting browns and creamy beige, like a warm beverage enjoyed indoors on a cool, rainy afternoon.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A2E1A#7D5D3A#AF8B5D#DDC29E#EDE0D4

Palette guide

How to use Rainy Day Coffee

Overview

The "Rainy Day Coffee" palette is a comforting collection of warm browns and creamy beiges, designed to evoke the cozy, inviting atmosphere of a warm beverage on a cool afternoon. From the deep, rich espresso shade of #4A2E1A to the soft, creamy #EDE0D4, this palette offers a harmonious gradient perfect for creating welcoming and sophisticated designs. The inviting mid-tones like #7D5D3A and #AF8B5D provide excellent depth and warmth for various elements. This palette is ideal for brands and projects that want to convey comfort, natural warmth, artisan quality, or a sense of quiet luxury.

Best used for

Coffee shop branding and websites
Home decor and interior design platforms
Cozy lifestyle blogs and e-commerce
Artisan product packaging
Food and beverage industry marketing
Wellness and self-care app UIs

Suggested color roles

primary

#4A2E1A serves as a rich, grounding primary color for headers, important calls to action, or dark-themed backgrounds, conveying warmth and depth.

secondary

#7D5D3A or #AF8B5D are excellent for subheadings, navigation, or content blocks, adding layers of warm sophistication.

accent

#DDC29E can be used as a soft, inviting accent for highlights, interactive elements, or graphic details, offering a touch of luminosity.

background

#EDE0D4 provides a creamy, warm background that is gentle on the eyes and ensures high readability for darker text.

text

For light backgrounds like #EDE0D4, use #4A2E1A for primary text. For darker backgrounds, #EDE0D4 or a soft cream offers good contrast.

Accessibility notes

Ensure #4A2E1A text on #EDE0D4 background meets WCAG AA contrast for optimal readability.
Avoid using #AF8B5D or #DDC29E for small text on #EDE0D4 backgrounds due to potential low contrast.
Always test the contrast ratio for all text, links, and interactive elements across the palette.
Consider providing sufficient visual cues beyond color for interactive elements, especially with similar mid-tones.

Recommended combinations

Cozy Comfort

A classic combination for a warm and inviting feel, using deep brown for primary, light cream for background, and a medium brown for secondary.

#4A2E1A · #EDE0D4 · #7D5D3A

Warm Gradient

Ideal for creating smooth, warm gradients in backgrounds, banners, or decorative elements, adding depth and softness.

#7D5D3A · #AF8B5D · #DDC29E

Artisan Touch

A light base with strong, rich headings and a warm, inviting accent color for buttons or key information.

#EDE0D4 · #4A2E1A · #AF8B5D

CSS variables

:root {
  --rainy-day-coffee-1: #4A2E1A;
  --rainy-day-coffee-2: #7D5D3A;
  --rainy-day-coffee-3: #AF8B5D;
  --rainy-day-coffee-4: #DDC29E;
  --rainy-day-coffee-5: #EDE0D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-day-coffee": {
        1: "#4A2E1A",
        2: "#7D5D3A",
        3: "#AF8B5D",
        4: "#DDC29E",
        5: "#EDE0D4",
      }
    }
  }
}

Hex values

Color 1#4A2E1A

Color 2#7D5D3A

Color 3#AF8B5D

Color 4#DDC29E

Color 5#EDE0D4

Accessibility

Contrast checker

2.1:1Fail

3.9:1AA18

7.2:1AAA

9.6:1AAA

2.1:1Fail

1.9:1Fail

3.5:1AA18

4.6:1AA

3.9:1AA18

1.9:1Fail

1.8:1Fail

2.4:1Fail

7.2:1AAA

3.5:1AA18

1.8:1Fail

1.3:1Fail

9.6:1AAA

4.6:1AA

2.4:1Fail

1.3:1Fail

Similar palettes

More like Rainy Day Coffee

View all warm

Warm Coffee Brew

Barista Brew Comfort

Barista Roast Comfort

Cafe Latte Comfort

Caramel Latte Dream

Coffee House Corner