Palette

Spiced Ginger Biscuit

Evokes the comforting warmth of autumn spices and freshly baked goods, perfect for cozy interiors.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Ginger Biscuit 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 Ginger Biscuit.

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

Data visualization

#8C472A#C26B39#E6945F#F3C49B#FAEEDD

Palette guide

How to use Spiced Ginger Biscuit

Overview

The Spiced Ginger Biscuit palette offers a comforting and inviting blend of warm browns and soft, creamy oranges, perfect for designs seeking coziness and natural warmth. Ranging from the rich #8C472A to the delicate #FAEEDD, with inviting mid-tones like #E6945F, this collection evokes the comforting aroma of freshly baked goods. Designers can leverage its earthy yet sweet tones for wholesome branding or user-friendly digital interfaces. Developers will find these colors excellent for creating warm, approachable user experiences, particularly in food, lifestyle, or artisan product applications. This palette ensures a sense of comfort and authenticity.

Best used for

Bakery and cafe branding
Cozy home decor e-commerce
Food blog and recipe websites
Autumnal marketing campaigns
Natural and organic product packaging
Warm, inviting mobile app interfaces

Suggested color roles

primary

Use #8C472A as a grounding, rich base for headers, footers, or main navigation, establishing a cozy feel.

secondary

Apply #C26B39 for subheadings, secondary buttons, or larger graphical elements, adding warmth and depth.

accent

Highlight key information or calls-to-action with #E6945F to draw attention without being overly bright.

background

Employ #FAEEDD for light, clean backgrounds that offer excellent contrast, or #F3C49B for a warmer, inviting backdrop.

text

For dark backgrounds, #FAEEDD provides readability. For lighter backgrounds like #FAEEDD, use #8C472A or a dark charcoal for optimal contrast.

Accessibility notes

Ensure #FAEEDD has sufficient contrast with any dark text, especially for body copy.
Avoid using #F3C49B as text on #E6945F due to low contrast.
The darkest color, #8C472A, provides excellent contrast with #FAEEDD for headings.
Consider larger font sizes or bolding for text set in #E6945F on a slightly darker background.

Recommended combinations

Comfort Contrast

Ideal for branding: darkest for logo/titles, lightest for background, mid-tone for accents.

#8C472A · #FAEEDD · #E6945F

Biscuit Warmth

Excellent for subtle gradients, illustrations, or soft background textures.

#C26B39 · #F3C49B · #FAEEDD

Spiced Depth

Use for creating visual hierarchy in content, progress indicators, or layered elements.

#8C472A · #C26B39 · #E6945F

CSS variables

:root {
  --spiced-ginger-biscuit-1: #8C472A;
  --spiced-ginger-biscuit-2: #C26B39;
  --spiced-ginger-biscuit-3: #E6945F;
  --spiced-ginger-biscuit-4: #F3C49B;
  --spiced-ginger-biscuit-5: #FAEEDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-ginger-biscuit": {
        1: "#8C472A",
        2: "#C26B39",
        3: "#E6945F",
        4: "#F3C49B",
        5: "#FAEEDD",
      }
    }
  }
}

Hex values

Color 1#8C472A

Color 2#C26B39

Color 3#E6945F

Color 4#F3C49B

Color 5#FAEEDD

Accessibility

Contrast checker

1.8:1Fail

2.9:1Fail

4.3:1AA18

6:1AA

1.8:1Fail

1.6:1Fail

2.4:1Fail

3.4:1AA18

2.9:1Fail

1.6:1Fail

1.5:1Fail

2.1:1Fail

4.3:1AA18

2.4:1Fail

1.5:1Fail

1.4:1Fail

6:1AA

3.4:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Spiced Ginger Biscuit

View all warm

Barista Roast Comfort

Gingerbread Bakery Warmth