Palette

Spiced Cider Warmth

Evokes the comforting, rich flavors and aromas of a warm spiced cider on a crisp autumn day.

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

#5C2B1D#9A4A28#CB6D38#E39958#F3C38C

Palette guide

How to use Spiced Cider Warmth

Overview

The "Spiced Cider Warmth" palette offers a rich, inviting spectrum of warm, earthy tones perfect for evoking comfort and natural elegance. Featuring a deep `#5C2B1D` (dark brown), a vibrant `#CB6D38` (orange), and a soft `#F3C38C` (creamy peach), this collection is ideal for projects needing a cozy, autumnal feel. Designers can leverage its depth for robust branding, while developers will find these hex codes create accessible, visually appealing interfaces. From the grounding intensity of `#9A4A28` to the gentle glow of `#E39958`, this palette provides versatility for conveying warmth, tradition, and a welcoming atmosphere across various digital and print applications.

Best used for

Autumn/Winter seasonal marketing campaigns
Cozy café or bakery branding and website design
Apparel or home goods e-commerce platforms
Editorial design for lifestyle or food blogs
Packaging for artisanal food and beverage products
Rustic or nature-themed event invitations

Suggested color roles

primary

#9A4A28 - A warm, inviting base color for main headers, prominent buttons, or large content blocks, offering a balance of depth and approachability.

secondary

#CB6D38 - Use this vibrant orange to highlight key information, call-to-action elements, or as a supporting brand color that adds energy without overwhelming.

accent

#E39958 - A softer, more muted orange perfect for subtle highlights, interactive states, or decorative elements where a gentle pop of color is desired.

background

#F3C38C - This light, creamy peach provides a soft, warm canvas that allows darker text and elements to stand out, ideal for body content areas.

text

#5C2B1D - A deep, readable brown that offers excellent contrast against lighter backgrounds like `#F3C38C`, providing warmth and legibility for primary body text.

Accessibility notes

Ensure `#5C2B1D` text has sufficient contrast against `#F3C38C` backgrounds for optimal readability, meeting WCAG AA standards.
Avoid placing `#E39958` text directly on `#F3C38C` backgrounds, as their proximity in lightness will likely cause poor contrast.
For interactive elements, use `#CB6D38` or `#9A4A28` to clearly indicate clickable states, ensuring visual distinction.
When using `#5C2B1D` as a background, pair it with white or near-white text for maximum legibility.

Recommended combinations

Earthy Foundation

Ideal for establishing a strong, grounded brand presence; `#5C2B1D` for headings, `#9A4A28` for secondary elements, and `#F3C38C` for backgrounds.

#5C2B1D · #9A4A28 · #F3C38C

Autumn Glow

Perfect for conveying warmth and vibrancy; `#CB6D38` as an accent, `#E39958` for subtle details, and `#F3C38C` as a light, airy background.

#CB6D38 · #E39958 · #F3C38C

Rich Contrast

Excellent for high-contrast designs; `#5C2B1D` for dark text or backgrounds, `#CB6D38` for powerful calls-to-action, and `#F3C38C` for clean content areas.

#5C2B1D · #CB6D38 · #F3C38C

CSS variables

:root {
  --spiced-cider-warmth-2-1: #5C2B1D;
  --spiced-cider-warmth-2-2: #9A4A28;
  --spiced-cider-warmth-2-3: #CB6D38;
  --spiced-cider-warmth-2-4: #E39958;
  --spiced-cider-warmth-2-5: #F3C38C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-cider-warmth-2": {
        1: "#5C2B1D",
        2: "#9A4A28",
        3: "#CB6D38",
        4: "#E39958",
        5: "#F3C38C",
      }
    }
  }
}

Hex values

Color 1#5C2B1D

Color 2#9A4A28

Color 3#CB6D38

Color 4#E39958

Color 5#F3C38C

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

4.9:1AA

7.1:1AAA

1.9:1Fail

1.7:1Fail

2.6:1Fail

3.8:1AA18

3.2:1AA18

1.7:1Fail

1.5:1Fail

2.2:1Fail

4.9:1AA

2.6:1Fail

1.5:1Fail

1.4:1Fail

7.1:1AAA

3.8:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Spiced Cider Warmth

View all warm

Autumn Cider Warmth

Cinnamon Spiced

Saffron Infusion Blend

Spice Merchant's Harvest

Spiced Autumn Comfort

Spiced Chai Comfort