Back to palettes

Palette

Spiced Cookie Warmth

Sweet and comforting tones, like freshly baked spiced cookies on a cold day.

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

#B37E55#D29C6C#E6C18E#F2DAB3#8C5D35

Palette guide

How to use Spiced Cookie Warmth

Overview

The Spiced Cookie Warmth palette offers a delightful array of soft, inviting browns and creamy beiges, perfectly capturing the essence of freshly baked, spiced treats. Ranging from the deep #8C5D35 to the light and airy #F2DAB3, with harmonious mid-tones like #B37E55, #D29C6C, and #E6C18E, this collection exudes a comforting and natural elegance. It's ideal for designs that aim to convey coziness, homemade quality, and a gentle warmth. Designers can utilize these versatile hues to create approachable and visually appealing experiences for various applications, from food branding to lifestyle content, emphasizing a sweet and welcoming aesthetic.

Best used for

  • Artisan bakery or dessert shop branding
  • Lifestyle blogs focused on home, food, or crafts
  • E-commerce sites for handmade goods or natural products
  • Holiday and seasonal greeting card design
  • Children's book illustrations or nursery decor
  • Websites and apps with a soft, inviting user interface

Suggested color roles

primary

Utilize #8C5D35 as a grounding, rich brown for main headers, footers, or strong brand elements, providing stability.

secondary

Apply #B37E55 for subheadings, navigation, or as a warm background for supporting content, offering a soft depth.

accent

Employ #D29C6C for subtle highlights, interactive elements, or to break up larger blocks of color with a gentle warmth.

background

Use #F2DAB3 as a primary background color for clean, airy layouts that enhance readability and a natural feel.

text

For body text on lighter backgrounds, #8C5D35 or a deep charcoal provides excellent contrast and a sophisticated, inviting look.

Accessibility notes

  • Ensure strong contrast between #8C5D35 and #F2DAB3 for text and background pairings.
  • Avoid using #E6C18E for small text on #D29C6C backgrounds due to potential low contrast.
  • For headings, #B37E55 on #F2DAB3 offers a pleasant and readable combination.
  • All critical text should aim for WCAG AA contrast standards, especially for interactive elements.

Recommended combinations

Sweet Dough

Ideal for a comforting and inviting brand presence, like a bakery or food blog.

#8C5D35 · #D29C6C · #F2DAB3

Vanilla Glaze

Creates a soft, creamy atmosphere for lifestyle content or gentle e-commerce.

#B37E55 · #E6C18E · #F2DAB3

Warm Spice

A grounded and elegant combination suitable for artisanal or natural product branding.

#8C5D35 · #B37E55 · #F2DAB3

CSS variables

:root {
  --spiced-cookie-warmth-1: #B37E55;
  --spiced-cookie-warmth-2: #D29C6C;
  --spiced-cookie-warmth-3: #E6C18E;
  --spiced-cookie-warmth-4: #F2DAB3;
  --spiced-cookie-warmth-5: #8C5D35;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-cookie-warmth": {
        1: "#B37E55",
        2: "#D29C6C",
        3: "#E6C18E",
        4: "#F2DAB3",
        5: "#8C5D35",
      }
    }
  }
}

Related searches

cookie inspired color palettelight brown color schemecozy neutral palettewarm beige brown colorsdessert brand colors

Palette colors

Hex values

Color 1#B37E55
·
Color 2#D29C6C
·
Color 3#E6C18E
·
Color 4#F2DAB3
·
Color 5#8C5D35
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
2.6:1Fail
1.6:1Fail
2
1.4:1Fail
1.4:1Fail
1.8:1Fail
2.3:1Fail
3
2.1:1Fail
1.4:1Fail
1.2:1Fail
3.3:1AA18
4
2.6:1Fail
1.8:1Fail
1.2:1Fail
4.1:1AA18
5
1.6:1Fail
2.3:1Fail
3.3:1AA18
4.1:1AA18

Similar palettes

More like Spiced Cookie Warmth

View all warm