Palette

Autumn Leaf Quilt

A cozy, patterned palette reflecting the diverse and rich colors of fall foliage, natural and warm.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumn Leaf Quilt 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 Autumn Leaf Quilt.

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

Data visualization

#8B4513#DAA520#B22222#6B8E23#A0522D

Palette guide

How to use Autumn Leaf Quilt

Overview

The Autumn Leaf Quilt palette is a cozy, patterned collection reflecting the diverse and rich colors of fall foliage, natural and warm. This natural collection offers designers and developers a versatile range of earthy browns, golds, reds, and greens, perfect for creating inviting and grounded experiences. Featuring robust #8B4513, golden #DAA520, bold #B22222, fresh #6B8E23, and deep #A0522D, this palette provides versatility. Its harmonious blend of natural tones creates a soothing visual flow, ideal for projects that aim to convey rustic charm, environmental themes, or the serene beauty of a fall forest, perfect for outdoor or natural branding.

Best used for

quilt and craft websites
rustic home decor branding
fall event promotions
nature-themed social media
cozy lifestyle blogs
environmental non-profit materials

Suggested color roles

primary

#A0522D - A deep, grounding sienna, excellent for foundational elements, large headers, or backgrounds that establish richness and natural stability.

secondary

#8B4513 - A robust saddle brown, perfect for supporting content blocks, navigation, or as a strong, earthy base for lighter accents.

accent

#B22222 - A strong, deep brick red, ideal for calls to action, important highlights, or decorative elements that demand attention.

background

#DAA520 - A warm, muted goldenrod, offers a soft and inviting backdrop that supports readability and complements the deeper tones.

text

#A0522D - For primary body text on light backgrounds like #DAA520, offering excellent readability and maintaining the palette's natural, earthy tone.

Accessibility notes

Ensure #A0522D or #8B4513 text on #DAA520 backgrounds meets WCAG AA contrast standards.
Avoid using #DAA520 for small text directly on #B22222 or #6B8E23 due to potential low contrast.
The green #6B8E23 provides good contrast against #DAA520, suitable for text or interactive elements.
Consider white or a very light cream for text on #A0522D, #8B4513, #B22222, or #6B8E23 for maximum readability.

Recommended combinations

Quilted Earth

Creates a grounded, natural look, perfect for environmental themes or rustic branding.

#A0522D · #8B4513 · #6B8E23

Foliage Pop

Ideal for a vibrant, inviting gradient, suitable for hero sections or visual storytelling of autumn landscapes.

#DAA520 · #B22222 · #6B8E23

Cozy Pattern

Provides a strong red accent against warm, earthy tones, excellent for calls to action or key information.

#B22222 · #DAA520 · #A0522D

CSS variables

:root {
  --autumn-leaf-quilt-1: #8B4513;
  --autumn-leaf-quilt-2: #DAA520;
  --autumn-leaf-quilt-3: #B22222;
  --autumn-leaf-quilt-4: #6B8E23;
  --autumn-leaf-quilt-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-leaf-quilt": {
        1: "#8B4513",
        2: "#DAA520",
        3: "#B22222",
        4: "#6B8E23",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#DAA520

Color 3#B22222

Color 4#6B8E23

Color 5#A0522D

Accessibility

Contrast checker

3.2:1AA18

1.1:1Fail

1.9:1Fail

1.3:1Fail

3.2:1AA18

3:1Fail

1.7:1Fail

2.5:1Fail

1.1:1Fail

3:1Fail

1.8:1Fail

1.2:1Fail

1.9:1Fail

1.7:1Fail

1.8:1Fail

1.5:1Fail

1.3:1Fail

2.5:1Fail

1.2:1Fail

1.5:1Fail

Similar palettes

More like Autumn Leaf Quilt