Palette

Hearthside Cocoa Bliss

Inviting earthy tones of hot cocoa and a crackling fire, perfect for a cozy evening indoors.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Hearthside Cocoa Bliss 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 Hearthside Cocoa Bliss.

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

Data visualization

#654321#A0522D#D2691E#F5DEB3#CD853F

Palette guide

How to use Hearthside Cocoa Bliss

Overview

The Hearthside Cocoa Bliss palette evokes the comforting warmth of a hot cocoa on a chilly evening, combining rich browns, inviting oranges, and a soft, creamy highlight. Key colors include the deep #654321, warm #A0522D, and vibrant #D2691E, alongside the buttery #CD853F and the serene #F5DEB3. This collection is ideal for designers and developers crafting experiences that prioritize coziness, comfort, and an inviting, home-like feel. Its earthy tones provide a stable yet welcoming base, perfect for branding, web design, or digital content that aims to wrap users in a sense of calm and contentment.

Best used for

Coffee shop and dessert brand identities
Cozy blog themes and lifestyle websites
Winter holiday promotions and e-commerce
Comfort food packaging and marketing
Relaxation and wellness app interfaces
Interior design inspiration for warm living spaces

Suggested color roles

primary

Designate #A0522D as the primary color for headings, navigation, or prominent UI elements, establishing a warm and inviting presence.

secondary

The vibrant #D2691E serves as an excellent secondary color for calls-to-action or accents that need to pop with an ember-like glow.

accent

Use #CD853F as a soft, inviting accent for highlights, buttons, or decorative details, adding a touch of caramel warmth.

background

The light, creamy #F5DEB3 provides an excellent, clean background, ensuring high readability for darker text and a serene canvas.

text

Employ #654321 for body text and crucial information. This deep, rich brown offers superior contrast on lighter backgrounds, enhancing readability.

Accessibility notes

Ensure #654321 provides sufficient contrast against #F5DEB3 for all body text to meet WCAG AA guidelines.
Avoid using #D2691E or #CD853F for small text on light backgrounds as their mid-tones may lack contrast.
When using #A0522D as a background, ensure text in #F5DEB3 or a very light shade has adequate contrast.
Pair #CD853F with darker palette colors for text or use it as a background for very dark text to ensure legibility.

Recommended combinations

Rich Cocoa

Ideal for main content blocks, providing strong contrast and a luxurious, comforting feel.

#654321 · #A0522D · #F5DEB3

Fireside Glow

Perfect for energetic accents or visual highlights, mimicking the warmth of a crackling fire.

#D2691E · #CD853F · #A0522D

Cozy Evening

Suitable for hero sections or landing pages, creating an inviting and serene atmosphere.

#F5DEB3 · #A0522D · #654321

CSS variables

:root {
  --hearthside-cocoa-bliss-1: #654321;
  --hearthside-cocoa-bliss-2: #A0522D;
  --hearthside-cocoa-bliss-3: #D2691E;
  --hearthside-cocoa-bliss-4: #F5DEB3;
  --hearthside-cocoa-bliss-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "hearthside-cocoa-bliss": {
        1: "#654321",
        2: "#A0522D",
        3: "#D2691E",
        4: "#F5DEB3",
        5: "#CD853F",
      }
    }
  }
}

Hex values

Color 1#654321

Color 2#A0522D

Color 3#D2691E

Color 4#F5DEB3

Color 5#CD853F

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

6.7:1AA

3:1Fail

1.6:1Fail

1.5:1Fail

4.3:1AA18

1.9:1Fail

2.4:1Fail

1.5:1Fail

2.8:1Fail

1.2:1Fail

6.7:1AA

4.3:1AA18

2.8:1Fail

2.3:1Fail

3:1Fail

1.9:1Fail

1.2:1Fail

2.3:1Fail

Similar palettes

More like Hearthside Cocoa Bliss

View all warm

Barista Roast Comfort

Coffee House Corner

Cozy Cottage Hearth

Fireside Comfort Glow

Gingerbread Bakery Warmth

Spiced Ginger Biscuit