Palette

Spiced Cookie Warmth

Rich and inviting browns, reminiscent of freshly baked gingerbread cookies.

WarmNatural5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Cookie Warmth 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 Spiced Cookie Warmth.

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

Data visualization

#8B4513#CD853F#D2B48C#A0522D#B58A67

Palette guide

How to use Spiced Cookie Warmth

Overview

The Spiced Cookie Warmth palette offers a rich and inviting array of brown and golden hues, perfectly capturing the essence of freshly baked, spiced cookies. With deep tones like #8B4513 and #A0522D, complemented by the warm #CD853F and softer #B58A67, it culminates in the light, comforting #D2B48C. This collection is excellent for designs seeking to evoke coziness, homemade charm, and festive cheer. Designers can leverage these harmonious colors to create welcoming visuals for food-related branding, seasonal promotions, or any project aiming for a comforting and authentic aesthetic, blending rich warmth with subtle sweetness.

Best used for

Bakery and confectionery branding and packaging
Holiday and festive season marketing materials
Recipe blogs and culinary content creation
Home decor and cozy lifestyle e-commerce sites
Craft and handmade goods branding
Digital interfaces that prioritize warmth and user comfort

Suggested color roles

primary

Utilize #8B4513 as a deep, grounding color for main headers, footers, or dominant brand elements, conveying richness.

secondary

Apply #A0522D for subheadings, navigation, or as a supporting background, offering a slightly lighter yet still robust brown.

accent

Employ #CD853F to highlight calls-to-action or key features, adding a touch of golden, spiced warmth.

background

Use #D2B48C as a soft, inviting background for main content areas, providing a clean canvas for darker text.

text

For body text on lighter backgrounds, #8B4513 or a deep charcoal offers excellent contrast and maintains the palette's cozy feel.

Accessibility notes

Ensure strong contrast between #8B4513 and #D2B48C for text and background pairings.
Avoid using #B58A67 for small text on #CD853F backgrounds due to potential low contrast.
For headings, #A0522D on #D2B48C provides a sophisticated and readable combination.
All critical text should adhere to WCAG AA contrast guidelines, especially for interactive elements.

Recommended combinations

Gingerbread Spice

Ideal for holiday promotions or bakery branding, evoking warmth and sweetness.

#8B4513 · #CD853F · #D2B48C

Golden Comfort

Creates a soft, inviting atmosphere for lifestyle blogs or cozy product showcases.

#A0522D · #B58A67 · #D2B48C

Rich Dough

A grounded and elegant combination suitable for high-end food or artisanal brands.

#8B4513 · #A0522D · #D2B48C

CSS variables

:root {
  --spiced-cookie-warmth-2-1: #8B4513;
  --spiced-cookie-warmth-2-2: #CD853F;
  --spiced-cookie-warmth-2-3: #D2B48C;
  --spiced-cookie-warmth-2-4: #A0522D;
  --spiced-cookie-warmth-2-5: #B58A67;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-cookie-warmth-2": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#A0522D",
        5: "#B58A67",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2B48C

Color 4#A0522D

Color 5#B58A67

Accessibility

Contrast checker

2.4:1Fail

3.6:1AA18

1.3:1Fail

2.3:1Fail

2.4:1Fail

1.5:1Fail

1.9:1Fail

1:1Fail

3.6:1AA18

1.5:1Fail

2.8:1Fail

1.6:1Fail

1.3:1Fail

1.9:1Fail

2.8:1Fail

1.8:1Fail

2.3:1Fail

1:1Fail

1.6:1Fail

1.8:1Fail

Similar palettes

More like Spiced Cookie Warmth

View all Warm

Gingerbread Spice House

Gingerbread Spice Mill

Harvest Sundown Hearth

Pumpkin Patch Glow

Spice Garden Earth

Spice Merchant's Dream