Palette

Spiced Cider Warmth

Rich reds and vibrant oranges embody the comforting, aromatic embrace of a warm, spiced apple cider.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B22222#CD853F#F4A460#8B4513#DDA0DD

Palette guide

How to use Spiced Cider Warmth

Overview

The Spiced Cider Warmth palette evokes a comforting autumn embrace, perfect for designs aiming for a rustic yet inviting feel. Dominated by rich, earthy tones, it features a robust #B22222 (Firebrick) alongside the warm embrace of #CD853F (Peru) and the lighter, more playful #F4A460 (Sandy Brown). A deep #8B4513 (Saddle Brown) grounds the scheme, offering strong contrast and a natural touch, while a surprising #DDA0DD (Plum) adds a subtle, intriguing highlight. This collection is ideal for creating a sense of warmth, tradition, and natural elegance, guiding users through content with its inherent comfort and visual depth.

Best used for

Autumn-themed websites and mobile applications
Food and beverage branding (e.g., coffee shops, bakeries)
Cozy home decor or rustic e-commerce platforms
Seasonal marketing campaigns and event branding
Content creation for blogs about crafts, cooking, or fall activities
Branding for traditional or artisanal products

Suggested color roles

primary

Use #B22222 (Firebrick) for strong calls-to-action, important headings, or primary brand elements that need to stand out with warmth and impact.

secondary

Apply #CD853F (Peru) to supporting sections, navigation bars, subheadings, or as a background for secondary information blocks to maintain warmth.

accent

Reserve #DDA0DD (Plum) for subtle highlights, interactive elements like buttons on hover, or small decorative details where a soft, unexpected pop is desired.

background

Employ #F4A460 (Sandy Brown) as a light, inviting background for main content areas, providing a warm and readable canvas for text and imagery.

text

For primary text, use #8B4513 (Saddle Brown) on lighter backgrounds like #F4A460 to ensure harmony and readability. For maximum contrast on any background, a deep charcoal or near-black is recommended.

Accessibility notes

Ensure #8B4513 (Saddle Brown) text on #F4A460 (Sandy Brown) backgrounds meets WCAG AA standards for readability.
Avoid placing #CD853F (Peru) directly on #B22222 (Firebrick) for small text without sufficient contrast testing due to their similar saturation.
Use #DDA0DD (Plum) sparingly as an accent for text or crucial interactive elements, as its lightness might not provide enough contrast on darker palette colors.
Always test all text and interactive element color combinations with accessibility checkers to ensure compliance and readability for all users.

Recommended combinations

Autumn Glow

For a vibrant, classic autumn feel in hero sections, headers, or prominent graphical elements, blending warmth and energy.

#B22222 · #CD853F · #F4A460

Earthy Foundation

Creates a grounded, readable base for body text and content blocks, offering strong contrast and a natural aesthetic.

#8B4513 · #F4A460 · #B22222

Subtle Highlight

Use this trio for navigation, interactive elements, or infographics where the plum provides a soft, unexpected pop against the earthier tones.

#CD853F · #DDA0DD · #8B4513

CSS variables

:root {
  --spiced-cider-warmth-1: #B22222;
  --spiced-cider-warmth-2: #CD853F;
  --spiced-cider-warmth-3: #F4A460;
  --spiced-cider-warmth-4: #8B4513;
  --spiced-cider-warmth-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-cider-warmth": {
        1: "#B22222",
        2: "#CD853F",
        3: "#F4A460",
        4: "#8B4513",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#CD853F

Color 3#F4A460

Color 4#8B4513

Color 5#DDA0DD

Accessibility

Contrast checker

2.2:1Fail

3.3:1AA18

1.1:1Fail

3.2:1AA18

2.2:1Fail

1.5:1Fail

2.4:1Fail

1.4:1Fail

3.3:1AA18

1.5:1Fail

3.5:1AA18

1:1Fail

1.1:1Fail

2.4:1Fail

3.5:1AA18

3.4:1AA18

3.2:1AA18

1.4:1Fail

1:1Fail

3.4:1AA18

Similar palettes

More like Spiced Cider Warmth