Palette

Autumn Maple Hues

Vibrant and warm, this palette embodies the rich, fiery colors of maple leaves in autumn.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumn Maple Hues 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 Maple Hues.

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

Data visualization

#B33939#E65A4F#FF998B#8C2F2D#60211E

Palette guide

How to use Autumn Maple Hues

Overview

The Autumn Maple Hues palette vibrantly captures the rich, fiery colors of maple leaves in autumn. It features a range of warm reds, from a medium russet (#B33939) and a lively coral red (#E65A4F) to a soft salmon pink (#FF998B), offering a beautiful gradient. Deeper tones like a rich brick red (#8C2F2D) and a dark maroon (#60211E) provide essential grounding and depth. This palette is incredibly useful for designers and developers aiming to infuse their projects with warmth, energy, and a natural, inviting aesthetic. Perfect for seasonal branding, engaging digital interfaces, or expressive illustrations, these hex codes ensure a cohesive and visually appealing experience that celebrates the vibrant spirit of fall.

Best used for

Vibrant seasonal marketing campaigns
Nature-inspired brand identity
Cozy blog and website themes
Digital art and illustration
Autumn-themed product packaging
Event promotions for fall festivals

Suggested color roles

primary

Utilize #B33939 as a prominent primary color for strong headers or brand logos, conveying warmth and vitality.

secondary

Employ #E65A4F for secondary content blocks or subheadings, adding a lively and inviting touch.

accent

Highlight interactive elements or key information with #FF998B to provide a softer, yet noticeable accent.

background

A light, creamy off-white background allows the richness of these red hues to truly stand out.

text

For optimal readability, use #60211E for body text on lighter backgrounds, or a crisp white on #B33939.

Accessibility notes

Ensure sufficient contrast between #60211E text and #FF998B background for WCAG AA compliance.
Avoid using #E65A4F or #FF998B for small text on similarly light backgrounds due to potential low contrast.
Test color combinations for users with color vision deficiencies, particularly within the red-pink spectrum.
Provide clear visual cues beyond color for interactive states, especially between #B33939 and #E65A4F.

Recommended combinations

Deep Roots

Creates a strong, grounded base with a soft, contrasting highlight, excellent for footers or bold sections.

#60211E · #8C2F2D · #FF998B

Vibrant Flush

Ideal for energetic calls-to-action, vibrant banners, or graphic elements that demand attention.

#B33939 · #E65A4F · #8C2F2D

Soft Warmth

Use for a soft, inviting background with deep text and a strong supporting color, suitable for content cards or alerts.

#FF998B · #60211E · #B33939

CSS variables

:root {
  --autumn-maple-hues-1: #B33939;
  --autumn-maple-hues-2: #E65A4F;
  --autumn-maple-hues-3: #FF998B;
  --autumn-maple-hues-4: #8C2F2D;
  --autumn-maple-hues-5: #60211E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-maple-hues": {
        1: "#B33939",
        2: "#E65A4F",
        3: "#FF998B",
        4: "#8C2F2D",
        5: "#60211E",
      }
    }
  }
}

Hex values

Color 1#B33939

Color 2#E65A4F

Color 3#FF998B

Color 4#8C2F2D

Color 5#60211E

Accessibility

Contrast checker

1.7:1Fail

2.9:1Fail

1.4:1Fail

2.1:1Fail

1.7:1Fail

2.3:1Fail

3.4:1AA18

2.9:1Fail

1.7:1Fail

4:1AA18

5.9:1AA

1.4:1Fail

2.3:1Fail

4:1AA18

1.5:1Fail

2.1:1Fail

3.4:1AA18

5.9:1AA

1.5:1Fail

Similar palettes

More like Autumn Maple Hues

Autumn Maple Hues

See it in context.

Ready when you are.

Built with Autumn Maple Hues.

How to use Autumn Maple Hues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Roots

Vibrant Flush

Soft Warmth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Autumn Maple Hues