Palette

Gingerbread Hearth

Rich, comforting browns and warm oranges reminiscent of spicy gingerbread baking by a crackling 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

#663300#994D00#CC7A00#E68A00#8B4513

Palette guide

How to use Gingerbread Hearth

Overview

The 'Gingerbread Hearth' palette offers rich, comforting browns and warm oranges reminiscent of spicy gingerbread baking by a crackling fire. This inviting collection features vibrant oranges like #E68A00 and #CC7A00, complemented by deep, grounding browns such as #663300 and #8B4513. 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 the holidays, perfect for engaging audiences with its inviting, rustic appeal.

Best used for

Winter holiday marketing campaigns
Cozy cafe and lounge interiors
Rustic cabin or lodge themes
Spiced beverage branding (e.g., cider, craft beer)
Comfort food packaging and recipe cards
Autumn and winter fashion accessory displays

Suggested color roles

primary

Use #CC7A00 as a vibrant, warm core for main headings, calls to action, or key visual elements, evoking firelight.

secondary

Apply #E68A00 for bright, inviting glows in backgrounds, illustrations, or subheadings, adding a cheerful touch.

accent

Introduce #663300 for deep, grounding contrast in important text, strong borders, or navigational elements.

background

Utilize #8B4513 as a warm, inviting mid-tone base, or pair with a near-white for optimal text contrast.

text

Choose #663300 for body text or a deep brown/black to ensure excellent readability on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for body text, using #663300 on a light background (e.g., off-white) for optimal readability.
Be cautious using #CC7A00 or #E68A00 directly as body text on light backgrounds due to potential legibility issues.
Verify that interactive elements have clear visual states, particularly within the orange-brown range.
Consider larger font sizes or bolding for lighter text colors when used against mid-tone backgrounds.

Recommended combinations

Hearth Glow

Excellent for creating vibrant headers, engaging calls to action, or striking accents, mimicking fire.

#E68A00 · #CC7A00 · #994D00

Deep Spice

Ideal for grounding elements, footers, or sections requiring a rich, natural, and sophisticated feel.

#663300 · #8B4513 · #CC7A00

Warm Ember

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

#994D00 · #CC7A00 · #E68A00

CSS variables

:root {
  --gingerbread-hearth-2-1: #663300;
  --gingerbread-hearth-2-2: #994D00;
  --gingerbread-hearth-2-3: #CC7A00;
  --gingerbread-hearth-2-4: #E68A00;
  --gingerbread-hearth-2-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gingerbread-hearth-2": {
        1: "#663300",
        2: "#994D00",
        3: "#CC7A00",
        4: "#E68A00",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#663300

Color 2#994D00

Color 3#CC7A00

Color 4#E68A00

Color 5#8B4513

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

3.9:1AA18

1.5:1Fail

1.7:1Fail

1.9:1Fail

2.3:1Fail

1.2:1Fail

3.1:1AA18

1.9:1Fail

1.3:1Fail

2.1:1Fail

3.9:1AA18

2.3:1Fail

1.3:1Fail

2.7:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

2.7:1Fail

Similar palettes

More like Gingerbread Hearth

View all warm

Gingerbread Spice Home

Cinnamon Cider Warmth