Palette

Harvest Moon Dusk

A deep to light gray scale, capturing the subdued, mystical ambiance of a harvest moon at dusk.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4A4C#716F71#9D9D9D#C6C6C6#F1F1F1

Palette guide

How to use Harvest Moon Dusk

Overview

The Harvest Moon Dusk palette captures the serene, subdued ambiance of twilight with a sophisticated monochrome gradient. This collection of greys, from the deep charcoal of #4F4A4C to the soft, near-white of #F1F1F1, offers a versatile foundation for designs requiring elegance and restraint. Developers will appreciate the predictable tonal range for UI states, while designers can leverage the subtle shifts between #716F71 and #9D9D9D to create depth and texture without relying on overt color. It's ideal for projects aiming for a modern, minimalist, or luxurious feel, evoking quiet sophistication.

Best used for

Luxury brand websites and packaging
Minimalist user interfaces and app themes
Photography portfolios and art galleries
Corporate branding and professional presentations
Modern architectural visualizations
High-end fashion and lifestyle blogs

Suggested color roles

primary

Use #4F4A4C as a strong, grounding base for headers, footers, or dominant elements, providing a deep, sophisticated anchor.

secondary

Employ #716F71 for secondary sections, navigation menus, or subtle content dividers, offering a softer yet still substantial presence.

accent

Apply #9D9D9D sparingly for subtle accents, hover states, or delicate outlines to add dimension without stark contrast.

background

Utilize #F1F1F1 as a clean, airy background, providing maximum readability and a crisp, modern feel.

text

For optimal readability, use #4F4A4C for primary text on lighter backgrounds like #F1F1F1. For dark backgrounds, a crisp white or a very light grey like #C6C6C6 can be effective.

Accessibility notes

Ensure sufficient contrast between #4F4A4C text and #F1F1F1 background for WCAG AA compliance.
Avoid placing #9D9D9D text directly on #C6C6C6 backgrounds due to low contrast.
Use #4F4A4C or a darker charcoal for body text on any of the lighter greys to maintain readability.
Consider larger font sizes or bolder weights when using mid-tone greys like #716F71 for important information.

Recommended combinations

Deep & Light Contrast

Perfect for high-contrast headlines on clean backgrounds, providing clear visual hierarchy.

#4F4A4C · #F1F1F1 · #716F71

Subtle Depth

Ideal for layered UI elements, card backgrounds, or subtle shadow effects, creating soft distinction.

#716F71 · #C6C6C6 · #9D9D9D

Tonal Gradient

Use for smooth transitions in backgrounds, loading animations, or progressive disclosure elements.

#9D9D9D · #F1F1F1 · #C6C6C6

CSS variables

:root {
  --harvest-moon-dusk-1: #4F4A4C;
  --harvest-moon-dusk-2: #716F71;
  --harvest-moon-dusk-3: #9D9D9D;
  --harvest-moon-dusk-4: #C6C6C6;
  --harvest-moon-dusk-5: #F1F1F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "harvest-moon-dusk": {
        1: "#4F4A4C",
        2: "#716F71",
        3: "#9D9D9D",
        4: "#C6C6C6",
        5: "#F1F1F1",
      }
    }
  }
}

Hex values

Color 1#4F4A4C

Color 2#716F71

Color 3#9D9D9D

Color 4#C6C6C6

Color 5#F1F1F1

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

5.1:1AA

7.7:1AAA

1.7:1Fail

1.8:1Fail

2.9:1Fail

4.4:1AA18

3.2:1AA18

1.8:1Fail

1.6:1Fail

2.4:1Fail

5.1:1AA

2.9:1Fail

1.6:1Fail

1.5:1Fail

7.7:1AAA

4.4:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Harvest Moon Dusk