Palette

Spiced Cider Hearth

Rich, inviting tones reminiscent of warm spiced cider enjoyed by a crackling fireplace on an autumn evening.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Cider Hearth 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 Cider Hearth.

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

Data visualization

#8B0000#CD5C5C#FF8C00#8B4513#D2B48C

Palette guide

How to use Spiced Cider Hearth

Overview

The 'Spiced Cider Hearth' palette evokes the cozy warmth of autumn evenings, ideal for designs seeking a rustic and comforting appeal. Featuring a deep #8B0000 (Dark Red) as its core, complemented by the vibrant #FF8C00 (Dark Orange) and earthy #8B4513 (Saddle Brown), this palette is perfect for creating inviting digital and print experiences. The lighter #D2B48C (Tan) provides a soft base, while #CD5C5C (Indian Red) adds a subtle, warm accent. Designers can leverage this collection for seasonal promotions, brand identities, or any project aiming for a natural, grounded aesthetic.

Best used for

Autumn-themed marketing campaigns and promotions
Rustic wedding invitations and event branding
Cozy coffee shop or bakery branding and interiors
Home decor blogs and interior design showcases
Seasonal product packaging and labels
Comfort-food recipe websites or cookbooks

Suggested color roles

primary

Use #8B0000 for strong brand presence, main headings, or critical call-to-action buttons, conveying warmth and importance.

secondary

Ideal for secondary headings, important highlights, or attention-grabbing elements that need to stand out without overpowering the primary, using #FF8C00.

accent

Apply #CD5C5C for subtle decorative details, hover states, or small interactive elements, adding a gentle pop of color.

background

A soft, inviting base for main content areas, providing excellent contrast for darker text and a comforting overall feel with #D2B48C.

text

Excellent for body text on lighter backgrounds like #D2B48C, ensuring readability while maintaining the palette's warm, earthy tone with #8B4513. For maximum contrast, consider a near-black text on #D2B48C.

Accessibility notes

Ensure #8B0000 and #8B4513 have sufficient contrast when used for text on #D2B48C; they are generally good choices.
Avoid using #CD5C5C or #FF8C00 for small body text on light backgrounds without thorough contrast checking due to their lower contrast ratio.
When using #FF8C00 for headings or larger text, always verify readability against the chosen background color.
For interactive elements, maintain a minimum contrast ratio of 3:1 for graphical objects and user interface components to ensure usability.

Recommended combinations

Warm Autumn

Perfect for fall-themed marketing materials, bold headlines, and cozy website designs, using #D2B48C as a clean background.

#8B0000 · #FF8C00 · #D2B48C

Rustic Comfort

Create inviting interfaces with #D2B48C as the base, #8B4513 for readable text, and #CD5C5C for subtle UI elements or decorative touches.

#8B4513 · #CD5C5C · #D2B48C

Bold Contrast

Leverage #8B0000 for impactful branding, #D2B48C for expansive backgrounds, and #8B4513 for primary text, ensuring strong readability and a grounded feel.

#8B0000 · #D2B48C · #8B4513

CSS variables

:root {
  --spiced-cider-hearth-1: #8B0000;
  --spiced-cider-hearth-2: #CD5C5C;
  --spiced-cider-hearth-3: #FF8C00;
  --spiced-cider-hearth-4: #8B4513;
  --spiced-cider-hearth-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-cider-hearth": {
        1: "#8B0000",
        2: "#CD5C5C",
        3: "#FF8C00",
        4: "#8B4513",
        5: "#D2B48C",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#CD5C5C

Color 3#FF8C00

Color 4#8B4513

Color 5#D2B48C

Accessibility

Contrast checker

2.5:1Fail

4.3:1AA18

1.4:1Fail

5.1:1AA

2.5:1Fail

1.7:1Fail

1.8:1Fail

2:1Fail

4.3:1AA18

1.7:1Fail

3:1AA18

1.2:1Fail