Palette

Forest Amber Rustle

Warm browns and fiery ambers mimic the gentle rustle of falling leaves, evoking an autumn forest's cozy embrace.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Amber Rustle 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 Forest Amber Rustle.

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

Data visualization

#8B4513#A0522D#CD5C5C#D2B48C#F5DEB3

Palette guide

How to use Forest Amber Rustle

Overview

The Forest Amber Rustle palette, featuring warm browns and fiery ambers, perfectly captures the cozy embrace of an autumn forest. From the deep, grounding #8B4513 to the vibrant #CD5C5C and the soft glow of #F5DEB3, this collection evokes a sense of natural comfort and rustic charm. Designers and developers will find these hues excellent for creating inviting digital spaces, autumnal marketing campaigns, or branding that emphasizes warmth and tradition. The blend of rich earth tones with a touch of fiery red allows for designs that are both grounded and visually engaging, ideal for conveying a natural, comforting aesthetic.

Best used for

Autumnal marketing campaigns
Rustic and vintage-themed websites
Cozy home decor branding
Nature-themed design projects
Food packaging and culinary brands
Seasonal event promotions

Suggested color roles

primary

Use #8B4513 as a rich, deep brown for strong headings, navigation, or foundational brand elements.

secondary

Employ #A0522D for supporting content blocks, backgrounds, or to add warmth to UI components.

accent

Apply #CD5C5C as a vibrant, eye-catching highlight for call-to-action buttons or important visual cues.

background

Utilize #F5DEB3 as a light, natural base for main content, providing a soft, inviting canvas.

text

For optimal readability, use #8B4513 or a dark brown/charcoal for body text on lighter backgrounds like #F5DEB3.

Accessibility notes

Ensure #8B4513 text on #F5DEB3 background meets WCAG AA contrast for good readability.
Test #A0522D on #D2B48C carefully for body text contrast; it may be better suited for larger headings.
Avoid using #CD5C5C for small text unless on a very dark background due to its vibrant nature.
Provide sufficient contrast for all interactive elements, especially when using lighter palette tones.

Recommended combinations

Autumn Leaves

Ideal for festive seasonal graphics, prominent call-to-action buttons, and warm branding.

#8B4513 · #CD5C5C · #F5DEB3

Rustic Charm

Perfect for backgrounds for natural products, engaging blog layouts, and cozy digital spaces.

#A0522D · #D2B48C · #F5DEB3

Earthy Glow

Excellent for layered illustrations, web headers, and branding for organic goods.

#8B4513 · #A0522D · #D2B48C

CSS variables

:root {
  --forest-amber-rustle-2-1: #8B4513;
  --forest-amber-rustle-2-2: #A0522D;
  --forest-amber-rustle-2-3: #CD5C5C;
  --forest-amber-rustle-2-4: #D2B48C;
  --forest-amber-rustle-2-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-amber-rustle-2": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD5C5C",
        4: "#D2B48C",
        5: "#F5DEB3",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#CD5C5C

Color 4#D2B48C

Color 5#F5DEB3

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

3.6:1AA18

5.4:1AA

1.3:1Fail

1.4:1Fail

2.8:1Fail

4.3:1AA18

1.8:1Fail

1.4:1Fail

2:1Fail

3:1AA18