Palette

Gingerbread Hearth Cozy

Inviting, spiced browns and creams, like warm gingerbread by a crackling hearth.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gingerbread Hearth Cozy 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 Gingerbread Hearth Cozy.

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

Data visualization

#8B4513#CD853F#D2B48C#A0522D#6B340E

Palette guide

How to use Gingerbread Hearth Cozy

Overview

The 'Gingerbread Hearth Cozy' palette offers inviting, spiced browns and creams, like warm gingerbread by a crackling hearth. This comforting collection features the soft glow of #D2B48C, the inviting warmth of #CD853F, and the grounding depth of #6B340E. Designers and developers can leverage these hues to create experiences that feel natural, cozy, and full of seasonal charm. It's an excellent choice for conveying warmth, tradition, and the comforting spirit of home, perfect for engaging audiences with its inviting, rustic appeal and evoking delicious memories.

Best used for

Cozy cafe and coffee shop branding
Holiday season marketing campaigns
Rustic interior design concepts
Artisanal food and beverage packaging
Autumn event decor and invitations
Comfort wear and loungewear fashion brands

Suggested color roles

primary

Use #CD853F as a warm, inviting core for main headings, interactive elements, or key visual components.

secondary

Apply #A0522D for rich, spiced depth in backgrounds, subheadings, or subtle decorative elements.

accent

Introduce #6B340E for the deepest, grounding contrast in important text, strong borders, or navigational elements.

background

Utilize #D2B48C as a soft, light base, reminiscent of freshly baked dough or a warm kitchen wall.

text

Choose #6B340E for body text or a deep brown/charcoal to ensure excellent readability on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for body text, using #6B340E on #D2B48C, for optimal readability.
Be mindful of using #CD853F or #A0522D for small text on light backgrounds to prevent legibility issues.
Verify that interactive elements have clear visual states, particularly within the mid-tone browns.
Test color combinations for users with color vision deficiencies, as some browns might appear similar.

Recommended combinations

Spiced Earth

Excellent for creating a rich, natural feel in headers, footers, or background patterns, evoking spice.

#CD853F · #A0522D · #6B340E

Warm Browns

Ideal for soft transitions in UI elements or subtle background effects that add warmth and depth.

#D2B48C · #CD853F · #8B4513

Deep Hearth

Suitable for grounding elements, frames, or sophisticated headers that demand attention and depth.

#8B4513 · #A0522D · #6B340E

CSS variables

:root {
  --gingerbread-hearth-cozy-1: #8B4513;
  --gingerbread-hearth-cozy-2: #CD853F;
  --gingerbread-hearth-cozy-3: #D2B48C;
  --gingerbread-hearth-cozy-4: #A0522D;
  --gingerbread-hearth-cozy-5: #6B340E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gingerbread-hearth-cozy": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#A0522D",
        5: "#6B340E",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2B48C

Color 4#A0522D

Color 5#6B340E

Accessibility

Contrast checker

2.4:1Fail

3.6:1AA18

1.3:1Fail

1.4:1Fail

2.4:1Fail

1.5:1Fail

1.9:1Fail

3.3:1AA18

3.6:1AA18

1.5:1Fail

2.8:1Fail

5:1AA

1.3:1Fail

1.9:1Fail

2.8:1Fail

1.8:1Fail

1.4:1Fail

3.3:1AA18

5:1AA

1.8:1Fail

Similar palettes

More like Gingerbread Hearth Cozy

View all warm

Artisan Loaf Hearth

Barista's Brew Comfort