Palette

Gingerbread Hearth

A cozy and inviting palette evoking the warmth of a spiced autumn bake by the fire.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A3E0C#8B4513#D2691E#F4A460#FFDAB9

Palette guide

How to use Gingerbread Hearth

Overview

The Gingerbread Hearth palette offers a truly inviting and warm experience, perfect for designs aiming for comfort and natural elegance. Dominated by rich browns and glowing oranges, this palette features a deep, grounding #6A3E0C, a vibrant mid-tone orange like #D2691E, and a soft, creamy #FFDAB9. Designers can leverage its earthy tones for a sense of tradition and homeliness, while developers will find these hues excellent for creating engaging UI elements that evoke a cozy, autumn-inspired ambiance. It’s ideal for projects requiring a comforting, spiced aesthetic that feels both rustic and refined.

Best used for

Autumnal event promotions and marketing materials
Bakery or coffee shop branding and interior design
Cozy blog themes or lifestyle websites
Home decor product catalogs and e-commerce sites
Seasonal packaging for food and beverage products
Children's book illustrations with a warm, friendly feel

Suggested color roles

primary

#6A3E0C - A deep, grounding chocolate brown, excellent for foundational elements, strong branding, or sophisticated headers.

secondary

#8B4513 - A rich, warm saddle brown, ideal for supporting sections, navigation, or call-to-action buttons that need a robust presence.

accent

#D2691E - A vibrant, burnt orange that serves as a lively accent for interactive elements, highlights, or expressive typography.

background

#FFDAB9 - A soft, creamy peach tone, perfect for clean, inviting backgrounds that allow darker elements to pop gently.

text

#6A3E0C - For primary text on light backgrounds like #FFDAB9, ensuring excellent readability. Use white or near-white on darker tones.

Accessibility notes

Ensure sufficient contrast when using #F4A460 or #D2691E for text on the lighter #FFDAB9 background.
Pairing the darkest #6A3E0C with the lightest #FFDAB9 offers strong contrast for essential text and UI elements.
Avoid using mid-tones like #8B4513 for small text on similar mid-tone backgrounds to prevent eye strain.
Consider larger font sizes or bolding for text using #F4A460 on slightly darker backgrounds.

Recommended combinations

Rustic Contrast

Strong branding, main content areas, and highlighted calls-to-action on a soft background.

#6A3E0C · #D2691E · #FFDAB9

Warm Gradient

Creating depth in illustrations, subtle transitions, or layered UI elements for a natural feel.

#8B4513 · #F4A460 · #FFDAB9

Earthy Emphasis

For robust header designs, prominent buttons, or graphical elements needing a deep, warm presence.

#6A3E0C · #8B4513 · #F4A460

CSS variables

:root {
  --gingerbread-hearth-1: #6A3E0C;
  --gingerbread-hearth-2: #8B4513;
  --gingerbread-hearth-3: #D2691E;
  --gingerbread-hearth-4: #F4A460;
  --gingerbread-hearth-5: #FFDAB9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gingerbread-hearth": {
        1: "#6A3E0C",
        2: "#8B4513",
        3: "#D2691E",
        4: "#F4A460",
        5: "#FFDAB9",
      }
    }
  }
}

Hex values

Color 1#6A3E0C

Color 2#8B4513

Color 3#D2691E

Color 4#F4A460

Color 5#FFDAB9

Accessibility

Contrast checker

1.3:1Fail

2.5:1Fail

4.5:1AA18

6.9:1AA

1.3:1Fail

2:1Fail

3.5:1AA18

5.4:1AA

2.5:1Fail

2:1Fail

1.8:1Fail

2.8:1Fail

4.5:1AA18

3.5:1AA18

1.8:1Fail

1.5:1Fail

6.9:1AA

5.4:1AA

2.8:1Fail

1.5:1Fail

Similar palettes

More like Gingerbread Hearth