Back to palettes

Palette

Autumn Cider

Rich, inviting oranges and browns, like a warm mug of 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 Autumn Cider 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 Cider.

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

Data visualization

#8B2C04#B54D12#DE7B2D#F7AA58#FFD799

Palette guide

How to use Autumn Cider

Overview

The "Autumn Cider" palette captures the essence of a warm mug of spiced cider on a crisp autumn day, offering rich, inviting oranges and deep browns. From the intense, almost burnt orange of #8B2C04 to the vibrant #B54D12 and the lively #DE7B2D, this palette radiates warmth. It is softened by the golden #F7AA58 and the gentle cream of #FFD799, providing a balanced range for diverse design applications. Designers and developers can utilize these hues to create engaging digital and print materials that convey comfort, rustic charm, and seasonal appeal.

Best used for

  • Rustic brand identities and logos
  • Food and beverage packaging, especially seasonal
  • Cozy website themes for blogs or small businesses
  • Autumn-themed digital marketing campaigns
  • Event decor and invitations for fall celebrations
  • Mobile app interfaces with a warm, friendly aesthetic

Suggested color roles

primary

#DE7B2D - A vibrant, inviting orange, excellent for primary calls-to-action, prominent headings, or key brand identifiers.

secondary

#B54D12 - A deeper, richer orange-brown, providing strong support for subheadings, navigation elements, or background sections.

accent

#8B2C04 - A dark, intense burnt orange that adds depth and sophistication, perfect for impactful accents or important interactive elements.

background

#FFD799 - A soft, golden cream that offers a warm, luminous base, ensuring clear content presentation and an inviting feel.

text

#8B2C04 - A deep, dark burnt orange-brown that provides excellent contrast against lighter shades like #FFD799, making text highly readable.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter colors like #F7AA58 on #FFD799, which may not pass WCAG AA.
  • Use #8B2C04 or a very dark brown/black for body text on #FFD799 to maximize readability.
  • Avoid using #F7AA58 for small text on any of the mid-to-light orange backgrounds.
  • Check color contrast for interactive states to ensure usability for all users.

Recommended combinations

Golden Glow

Creates a bright, warm gradient, ideal for cheerful backgrounds or highlighting sections.

#FFD799 · #F7AA58 · #DE7B2D

Deep Earth

A sophisticated combination with deep and mid-tones, balanced by a light background for contrast.

#8B2C04 · #B54D12 · #FFD799

Rustic Pop

Uses the vibrant orange as a main color, with lighter and darker counterparts for dynamic visual interest.

#DE7B2D · #F7AA58 · #8B2C04

CSS variables

:root {
  --autumn-cider-1: #8B2C04;
  --autumn-cider-2: #B54D12;
  --autumn-cider-3: #DE7B2D;
  --autumn-cider-4: #F7AA58;
  --autumn-cider-5: #FFD799;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-cider": {
        1: "#8B2C04",
        2: "#B54D12",
        3: "#DE7B2D",
        4: "#F7AA58",
        5: "#FFD799",
      }
    }
  }
}

Related searches

rustic orange brown paletteautumn theme color codesspiced cider design colorswarm fall ui palettecozy drink color scheme

Palette colors

Hex values

Color 1#8B2C04
·
Color 2#B54D12
·
Color 3#DE7B2D
·
Color 4#F7AA58
·
Color 5#FFD799
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.4:1AA18
6.3:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
3.8:1AA18
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
2.2:1Fail
4
4.4:1AA18
2.7:1Fail
1.6:1Fail
1.4:1Fail
5
6.3:1AA
3.8:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Autumn Cider

View all warm