Palette

Harvest Moon Glow

Deep, comforting golds and browns, inspired by the soft, illuminating glow of a harvest moon.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Harvest Moon Glow 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 Harvest Moon Glow.

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

Data visualization

#4C3717#7A5B2E#AC894E#D8AE6D#F7DB91

Palette guide

How to use Harvest Moon Glow

Overview

The Harvest Moon Glow palette offers a selection of deep, comforting golds and browns, inspired by the soft, illuminating glow of an autumnal moon. Ranging from the profound depth of #4C3717 to the luminous #F7DB91, these colors exude elegance, warmth, and a touch of mystery. Designers can effectively use hex codes like #7A5B2E and #AC894E to craft sophisticated luxury branding, vintage-inspired web designs, or artisanal product packaging. This palette is ideal for projects that aim to convey richness, tradition, and a comforting, inviting atmosphere, blending natural earth tones with a subtle golden radiance.

Best used for

Luxury branding and high-end product design
Vintage-inspired websites and digital experiences
Artisanal craft and handmade goods marketing
Upscale interior design and decor concepts
Sophisticated autumnal fashion collections
Warm, inviting blog themes and content platforms

Suggested color roles

primary

Designate #4C3717 as the deep, anchoring color for main headers, footers, or dominant elements, providing a robust and elegant foundation.

secondary

Employ #7A5B2E for supporting content areas, subheadings, or background elements that require a rich, mid-tone brown.

accent

Apply #AC894E for warm, inviting accents, interactive elements, or graphical details, adding a touch of golden warmth.

background

Utilize #F7DB91 as a soft, luminous background, offering excellent readability for darker text and a gentle, sophisticated canvas.

text

For primary text, #4C3717 provides strong contrast against #F7DB91. A crisp white or very light cream works best for text on darker shades such as #4C3717.

Accessibility notes

Ensure #4C3717 text on #F7DB91 background meets WCAG AA contrast for essential readability.
Be cautious when pairing #AC894E with #D8AE6D for text, as contrast may be insufficient for smaller fonts.
Prioritize the darkest color, #4C3717, for crucial text elements on lighter tones within the palette.
Consider increasing font size or weight for text using mid-range colors like #7A5B2E on similar backgrounds.

Recommended combinations

Rich Contrast

Creates a strong, elegant contrast ideal for headlines and calls to action against a soft, luminous background.

#4C3717 · #F7DB91 · #7A5B2E

Golden Layers

Excellent for layered UI components, card backgrounds, or subtle gradients that evoke depth and warmth.

#7A5B2E · #D8AE6D · #AC894E

Luminous Accent

Use for delicate highlights, interactive states, or decorative elements that need a gentle, sophisticated pop.

#AC894E · #F7DB91 · #4C3717

CSS variables

:root {
  --harvest-moon-glow-3-1: #4C3717;
  --harvest-moon-glow-3-2: #7A5B2E;
  --harvest-moon-glow-3-3: #AC894E;
  --harvest-moon-glow-3-4: #D8AE6D;
  --harvest-moon-glow-3-5: #F7DB91;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "harvest-moon-glow-3": {
        1: "#4C3717",
        2: "#7A5B2E",
        3: "#AC894E",
        4: "#D8AE6D",
        5: "#F7DB91",
      }
    }
  }
}

Hex values

Color 1#4C3717

Color 2#7A5B2E

Color 3#AC894E

Color 4#D8AE6D

Color 5#F7DB91

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

5.5:1AA

8.3:1AAA

1.8:1Fail

1.9:1Fail

3:1AA18

4.6:1AA

3.5:1AA18

1.9:1Fail

1.6:1Fail

2.4:1Fail