Palette

Harvest Spice Bake

Warm and inviting tones evoke the aromas of cinnamon, nutmeg, and pumpkin pie from a fall kitchen.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Harvest Spice Bake 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 Harvest Spice Bake.

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

Data visualization

#8A4F2A#C77B3C#F0C49B#4F2E1B#E2B277

Palette guide

How to use Harvest Spice Bake

Overview

The Harvest Spice Bake palette evokes the warm and inviting aromas of cinnamon, nutmeg, and pumpkin pie from a fall kitchen. This cozy collection features the deep #4F2E1B (Dark Brown) and #8A4F2A (Brown), providing a rich, grounded foundation. The warm #C77B3C (Rust Orange) adds a vibrant spice tone, while the lighter #E2B277 (Light Brown) and #F0C49B (Light Peach) offer soft, comforting accents and a luminous base. Ideal for designers seeking to create designs that are comforting, appetizing, and capture the wholesome, natural mood of autumnal baking.

Best used for

Food and recipe blogs
Cozy cafe branding
Autumnal product packaging
Baking-related businesses
Seasonal marketing campaigns
Rustic kitchen decor

Suggested color roles

primary

Use #C77B3C (Rust Orange) as a warm, inviting main color, reminiscent of spices and baked goods.

secondary

Apply #8A4F2A (Brown) to add depth and richness, complementing the primary and providing a grounded feel.

accent

Employ #E2B277 (Light Brown) as a soft highlight, perfect for gentle details, subtle accents, or a touch of warmth.

background

Utilize #F0C49B (Light Peach) as a light, warm, and comforting background, ensuring excellent readability for darker text.

text

Select #4F2E1B (Dark Brown) for body text and headings, providing excellent contrast and a harmonious, natural feel, or a rich charcoal for general readability.

Accessibility notes

Ensure #4F2E1B or a rich charcoal text on #F0C49B has strong contrast for optimal readability across all text sizes.
Avoid using #E2B277 or #C77B3C for small text on the #F0C49B background due to potential low contrast.
Check contrast ratios for interactive elements, especially against similar brown/orange tones, to ensure usability.
For critical information, use the darkest available color against the lightest background to ensure maximum legibility.

Recommended combinations

Spice Blend

Ideal for inviting headers and content blocks, evoking the warm, aromatic essence of spices.

#C77B3C · #8A4F2A · #F0C49B

Baked Goods

Perfect for strong branding and earthy details, conveying depth, warmth, and a homemade feel.

#4F2E1B · #E2B277 · #C77B3C

Cozy Kitchen

Use for soft backgrounds and subtle accents, creating a gentle yet warm and comforting atmosphere.

#F0C49B · #E2B277 · #8A4F2A

CSS variables

:root {
  --harvest-spice-bake-1: #8A4F2A;
  --harvest-spice-bake-2: #C77B3C;
  --harvest-spice-bake-3: #F0C49B;
  --harvest-spice-bake-4: #4F2E1B;
  --harvest-spice-bake-5: #E2B277;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "harvest-spice-bake": {
        1: "#8A4F2A",
        2: "#C77B3C",
        3: "#F0C49B",
        4: "#4F2E1B",
        5: "#E2B277",
      }
    }
  }
}

Hex values

Color 1#8A4F2A

Color 2#C77B3C

Color 3#F0C49B

Color 4#4F2E1B

Color 5#E2B277

Accessibility

Contrast checker

2:1Fail

4:1AA18

1.9:1Fail

3.4:1AA18

2:1Fail

2.1:1Fail

3.6:1AA18

1.7:1Fail

4:1AA18

2.1:1Fail

7.5:1AAA

1.2:1Fail