Palette

Woodland Ember Foliage

Capturing the vibrant and rustic beauty of autumn leaves, with warm reds, oranges, and deep forest greens.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woodland Ember Foliage 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 Woodland Ember Foliage.

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

Data visualization

#CD5C5C#B22222#8B4513#4B5320#D2B48C

Palette guide

How to use Woodland Ember Foliage

Overview

The Woodland Ember Foliage palette captures the raw, vibrant energy of autumn with its warm, rustic tones. Featuring a rich Firebrick (#B22222) and a lighter Indian Red (#CD5C5C), it evokes the fiery glow of changing leaves. Grounded by the deep, earthy SaddleBrown (#8B4513) and a muted Olive Drab (#4B5320), the palette is balanced with the soft, natural touch of Tan (#D2B48C). This collection is perfect for designers and developers aiming to convey warmth, tradition, or a cozy, autumnal feel in their projects, offering a strong visual narrative through its natural, robust color harmony.

Best used for

Autumn-themed websites and digital campaigns
Rustic brand identities or logos
Cozy home decor or interior design mockups
Outdoor adventure and nature-focused marketing
Seasonal product packaging
Traditional craft or artisanal goods branding

Suggested color roles

primary

Use Firebrick (#B22222) for high-impact calls to action, important headlines, or key branding elements where a strong, warm presence is desired.

secondary

SaddleBrown (#8B4513) provides a robust, earthy foundation, ideal for navigation, background sections, or primary content blocks in more subdued areas.

accent

Indian Red (#CD5C5C) serves as a brighter, inviting accent for interactive elements, highlights, or secondary calls to action, softening the intensity of the primary red.

background

Tan (#D2B48C) offers a light, neutral base, perfect for main content areas or spacious backgrounds, ensuring readability and a gentle warmth.

text

Olive Drab (#4B5320) works well for body text, providing excellent readability against lighter backgrounds, or use a deep charcoal for optimal contrast.

Accessibility notes

Ensure sufficient contrast between #B22222 or #CD5C5C and #D2B48C for text, aiming for AA or AAA compliance.
Use #4B5320 for text on #D2B48C backgrounds to maintain readability.
Avoid placing #CD5C5C directly against #B22222 for small text due to low contrast.
Consider larger font sizes or bolding for text using #8B4513 on mid-tone backgrounds.

Recommended combinations

Ember & Tan

Bold primary with a soft background and a grounding text color for impactful messaging.

#B22222 · #D2B48C · #4B5320

Rustic Hearth

Earthy base with a warm accent and a light neutral for a cozy, inviting feel.

#8B4513 · #CD5C5C · #D2B48C

Forest Glow

Deep green paired with a fiery red and a light background for nature-inspired designs with a pop of warmth.

#4B5320 · #B22222 · #D2B48C

CSS variables

:root {
  --woodland-ember-foliage-1: #CD5C5C;
  --woodland-ember-foliage-2: #B22222;
  --woodland-ember-foliage-3: #8B4513;
  --woodland-ember-foliage-4: #4B5320;
  --woodland-ember-foliage-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woodland-ember-foliage": {
        1: "#CD5C5C",
        2: "#B22222",
        3: "#8B4513",
        4: "#4B5320",
        5: "#D2B48C",
      }
    }
  }
}

Hex values

Color 1#CD5C5C

Color 2#B22222

Color 3#8B4513

Color 4#4B5320

Color 5#D2B48C

Accessibility

Contrast checker

1.7:1Fail

1.8:1Fail

2.1:1Fail

2:1Fail

1.7:1Fail

1.1:1Fail

1.2:1Fail

3.4:1AA18

1.8:1Fail

1.1:1Fail

1.2:1Fail

3.6:1AA18

2.1:1Fail

1.2:1Fail

4.2:1AA18

2:1Fail

3.4:1AA18

3.6:1AA18

4.2:1AA18

Similar palettes

More like Woodland Ember Foliage

Woodland Ember Foliage

See it in context.

Ready when you are.

Built with Woodland Ember Foliage.

How to use Woodland Ember Foliage

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ember & Tan

Rustic Hearth

Forest Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Woodland Ember Foliage