Palette

Lunar Moth Wings

Soft, muted tones inspired by the subtle shimmer of a lunar moth under a pale moon.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Moth Wings 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 Lunar Moth Wings.

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

Data visualization

#D9D7DA#A8A1A4#736C70#474145#EDEAF0

Palette guide

How to use Lunar Moth Wings

Overview

The Lunar Moth Wings palette presents a collection of soft, muted tones inspired by the subtle shimmer of a lunar moth under a pale moon. This neutral scheme features a harmonious progression of greys, from the almost white #EDEAF0 to the deep #474145 (Dark Grey), with intermediate shades like #D9D7DA and #736C70 (Grullo). The slight warmth in these greys gives the palette an ethereal and delicate quality, making it feel organic and inviting. It's an excellent choice for designers aiming for a calm, sophisticated, and understated aesthetic, perfect for projects that require a gentle, almost whispered visual narrative.

Best used for

Ethereal branding and gentle logos
Meditation or wellness application interfaces
Artistic and creative website designs
Fashion lookbooks and subtle product displays
Luxury item packaging with a soft touch
Calm and comforting interior design

Suggested color roles

primary

Use #736C70 (Grullo) for main content areas, prominent headings, or primary interactive elements, providing a grounding, soft presence.

secondary

Employ #A8A1A4 (Rosy Brown) for supporting information, subheadings, or background textures, offering a delicate complementary tone.

accent

Apply #474145 (Dark Grey) sparingly for impactful calls-to-action, important icons, or to provide strong visual anchors.

background

Utilize #EDEAF0 (Near White/Pale Lavender Grey) as a clean, ethereal background, creating an open and delicate feel.

text

For optimal readability, use #474145 (Dark Grey) for all body text and primary headings against lighter backgrounds.

Accessibility notes

Ensure #474145 text on #EDEAF0 backgrounds meets WCAG AA contrast standards for good readability.
Avoid using #D9D7DA for small text on #EDEAF0 as the contrast will be insufficient; reserve it for larger decorative elements.
Text in #736C70 on #EDEAF0 provides good contrast, suitable for secondary text or larger elements.
Be mindful of contrast when combining #A8A1A4 with #736C70 for elements like borders or subtle separators.

Recommended combinations

Pale Shimmer

Ideal for creating soft, ethereal gradients or layered backgrounds that evoke a delicate, shimmering effect.

#EDEAF0 · #D9D7DA · #A8A1A4

Deep Moth

Perfect for content blocks or graphical elements that require more visual weight and a grounded, subtle depth.

#474145 · #736C70 · #A8A1A4

Ethereal Glow

Effective for highlighting key information or interactive components, with the dark accent providing clear emphasis.

#D9D7DA · #474145 · #736C70

CSS variables

:root {
  --lunar-moth-wings-1: #D9D7DA;
  --lunar-moth-wings-2: #A8A1A4;
  --lunar-moth-wings-3: #736C70;
  --lunar-moth-wings-4: #474145;
  --lunar-moth-wings-5: #EDEAF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-moth-wings": {
        1: "#D9D7DA",
        2: "#A8A1A4",
        3: "#736C70",
        4: "#474145",
        5: "#EDEAF0",
      }
    }
  }
}

Hex values

Color 1#D9D7DA

Color 2#A8A1A4

Color 3#736C70

Color 4#474145

Color 5#EDEAF0

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

7:1AA

1.2:1Fail

1.8:1Fail

2:1Fail

3.9:1AA18

2.1:1Fail

3.6:1AA18

2:1Fail

1.9:1Fail

4.3:1AA18

7:1AA

3.9:1AA18

1.9:1Fail

8.4:1AAA

1.2:1Fail

2.1:1Fail

4.3:1AA18

8.4:1AAA

Similar palettes

More like Lunar Moth Wings