Palette

Harvest Spice Bloom

A comforting blend of rich, spiced autumnal tones, like a cozy fall afternoon.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CC744B#E8B48F#8F4C3B#5E3C2D#FAD6AD

Palette guide

How to use Harvest Spice Bloom

Overview

Harvest Spice Bloom is a deeply comforting and inviting color palette that perfectly captures the essence of a cozy autumnal afternoon. Featuring a rich array of warm, earthy tones, this palette grounds designs in natural warmth. The vibrant orange-brown of #CC744B serves as a lively focal point, beautifully complemented by the softer, creamy notes of #FAD6AD and #E8B48F. Deeper, grounding shades like the dark brown #5E3C2D and the rustic #8F4C3B add depth and sophistication. Ideal for projects seeking a rustic, natural, or seasonal fall aesthetic, Harvest Spice Bloom evokes feelings of comfort, tradition, and organic beauty, making it versatile for both digital and print applications.

Best used for

Autumnal branding and marketing materials
Rustic home decor websites or blogs
Food and beverage packaging (e.g., coffee, baked goods)
Cozy lifestyle product design
Seasonal event invitations and decorations
Nature-inspired digital illustrations

Suggested color roles

primary

Use #CC744B as a dominant brand color for headings or call-to-action buttons to convey warmth and energy.

secondary

Employ #8F4C3B for subheadings, navigation elements, or significant graphic details to add depth without overpowering the primary.

accent

Highlight key elements with #FAD6AD or #E8B48F for a softer, inviting touch, perfect for interactive states or small decorative details.

background

A light background of #FAD6AD or #E8B48F provides a gentle, warm canvas, allowing richer colors to stand out.

text

For optimal readability on lighter backgrounds like #FAD6AD, use a dark contrast like #5E3C2D or a deep charcoal. On darker backgrounds, #FAD6AD makes an excellent legible text color.

Accessibility notes

Ensure sufficient contrast between #5E3C2D text on #FAD6AD or #E8B48F backgrounds for WCAG AA compliance.
Avoid placing #CC744B directly on #8F4C3B for small text, as contrast might be insufficient for some users.
Always test text legibility, especially with #E8B48F used as a background for lighter text colors.
Use #5E3C2D for body text to guarantee readability across most light and medium palette backgrounds.

Recommended combinations

Earthy Warmth

Ideal for primary branding, creating a balanced and inviting feel for headers and content blocks.

#5E3C2D · #CC744B · #FAD6AD

Rustic Depth

Excellent for backgrounds with complementary text, or for intricate design elements needing depth.

#8F4C3B · #E8B48F · #5E3C2D

Soft Glow

Perfect for UI elements, buttons, and highlights where a comforting, approachable aesthetic is desired.

#FAD6AD · #CC744B · #5E3C2D

CSS variables

:root {
  --harvest-spice-bloom-1: #CC744B;
  --harvest-spice-bloom-2: #E8B48F;
  --harvest-spice-bloom-3: #8F4C3B;
  --harvest-spice-bloom-4: #5E3C2D;
  --harvest-spice-bloom-5: #FAD6AD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "harvest-spice-bloom": {
        1: "#CC744B",
        2: "#E8B48F",
        3: "#8F4C3B",
        4: "#5E3C2D",
        5: "#FAD6AD",
      }
    }
  }
}

Hex values

Color 1#CC744B

Color 2#E8B48F

Color 3#8F4C3B

Color 4#5E3C2D

Color 5#FAD6AD

Accessibility

Contrast checker

1.8:1Fail

1.9:1Fail

2.9:1Fail

2.5:1Fail

1.8:1Fail

3.5:1AA18

5.3:1AA

1.3:1Fail

1.9:1Fail

3.5:1AA18

1.5:1Fail

4.7:1AA