Palette

Lunar Dust Veil

A collection of muted greys, evoking the mysterious and stark surface of the moon.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Dust Veil 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 Dust Veil.

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

Data visualization

#1A1D20#3E4348#6B7178#A0A7AE#D4DBE3

Palette guide

How to use Lunar Dust Veil

Overview

The 'Lunar Dust Veil' palette offers a compelling collection of muted greys, evoking the mysterious and stark surface of the moon. Ranging from the deep, near-black #1A1D20 to the light, airy #D4DBE3, with balanced mid-tones like #6B7178 and #A0A7AE, this palette is ideal for creating sophisticated dark mode UIs or elegant, modern designs. Designers and developers will find its cool undertones perfect for conveying a sense of depth, professionalism, and understated style, making it versatile for both minimalist and complex digital experiences.

Best used for

Dark mode UI and app themes
Luxury automotive interfaces and branding
Cybersecurity dashboards and platforms
Sophisticated gaming themes and websites
Film production branding and portfolios
Astronomy-themed educational content

Suggested color roles

primary

Utilize #1A1D20 as a deep, commanding primary color for main backgrounds in dark mode or impactful headings.

secondary

Apply #3E4348 for supportive dark tones, secondary panels, or content blocks in a dark theme.

accent

Use #6B7178 as a versatile mid-tone for interactive elements, borders, or subtle graphical accents.

background

Choose #1A1D20 for a rich, immersive dark background or #D4DBE3 for a clean, light base in a dual-theme design.

text

Employ #D4DBE3 for text on dark backgrounds and #1A1D20 for text on light backgrounds to ensure optimal contrast.

Accessibility notes

#D4DBE3 on #1A1D20 offers excellent contrast, making it highly readable for dark mode text.
#1A1D20 on #D4DBE3 also provides strong contrast for light mode text, ensuring versatility.
Ensure sufficient contrast when using intermediate shades like #A0A7AE on #3E4348, especially for smaller text.
Avoid using #3E4348 or #6B7178 for small text on #1A1D20, as contrast might be insufficient for WCAG AA compliance.

Recommended combinations

Dark Mode Base

Provides a clear and highly contrasted foundation for dark mode interfaces, ensuring readability.

#1A1D20 · #3E4348 · #D4DBE3

Grayscale Depth

Ideal for layered UI elements, creating a sense of depth and hierarchy within a dark or neutral theme.

#6B7178 · #A0A7AE · #3E4348

Light Contrast

Suitable for creating clean, readable sections, using lighter elements on a dark background for emphasis.

#D4DBE3 · #A0A7AE · #1A1D20

CSS variables

:root {
  --lunar-dust-veil-1: #1A1D20;
  --lunar-dust-veil-2: #3E4348;
  --lunar-dust-veil-3: #6B7178;
  --lunar-dust-veil-4: #A0A7AE;
  --lunar-dust-veil-5: #D4DBE3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-dust-veil": {
        1: "#1A1D20",
        2: "#3E4348",
        3: "#6B7178",
        4: "#A0A7AE",
        5: "#D4DBE3",
      }
    }
  }
}

Hex values

Color 1#1A1D20

Color 2#3E4348

Color 3#6B7178

Color 4#A0A7AE

Color 5#D4DBE3

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

7:1AA

12.1:1AAA

1.7:1Fail

2:1Fail

4.1:1AA18

7.2:1AAA

3.4:1AA18

2:1Fail

3.5:1AA18

7:1AA

4.1:1AA18

2:1Fail

1.7:1Fail

12.1:1AAA

7.2:1AAA

3.5:1AA18

1.7:1Fail

Similar palettes

More like Lunar Dust Veil

Lunar Dust Veil

See it in context.

Ready when you are.

Built with Lunar Dust Veil.

How to use Lunar Dust Veil

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dark Mode Base

Grayscale Depth

Light Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lunar Dust Veil