Palette

Lunar Dust Plains

Subtle, silvery greys and muted blues reflecting the desolate yet beautiful surface of lunar plains.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2e3d4a#5a6e7d#8c9fb0#bacade#e3eaf2

Palette guide

How to use Lunar Dust Plains

Overview

The Lunar Dust Plains palette is a sophisticated collection of cool, muted blues and silvery grays, reflecting the desolate yet beautiful expanse of lunar plains. It features a deep blue-gray (#2e3d4a), a medium blue-gray (#5a6e7d), a light blue-gray (#8c9fb0), a very light blue-gray (#bacade), and an off-white blue-gray (#e3eaf2). This palette is ideal for designers and developers seeking a calm, modern, and high-tech aesthetic with a touch of atmospheric depth. Its harmonious, desaturated tones create a sense of vastness and tranquility, perfect for projects that require a refined, understated elegance and clear visual structure.

Best used for

Corporate tech and software interfaces
Scientific research and aerospace branding
Minimalist websites and digital art
Modern interior design concepts
Data visualization and dashboards
Luxury branding with a serene touch

Suggested color roles

primary

Use #2e3d4a as a deep, grounding primary color for headers, main navigation, or backgrounds in dark themes, providing stability and depth.

secondary

Employ #5a6e7d for secondary elements, content blocks, or subtle accents to introduce a calm, expansive tone.

accent

Apply #8c9fb0 as a subtle, atmospheric highlight for interactive elements, iconography, or key information, mimicking distant light.

background

Utilize #e3eaf2 for an airy, clean base that evokes moonlit plains, or #2e3d4a for a sophisticated dark mode.

text

For primary text, use #2e3d4a for excellent legibility on lighter backgrounds, or #e3eaf2 for contrast on darker shades.

Accessibility notes

Ensure sufficient contrast for text, especially between #bacade and #e3eaf2, which are very close in value.
Verify that interactive elements have clearly defined states (hover, active) beyond just color changes.
Use larger font sizes or bolder weights for text on similar background shades to enhance readability.
Test color usage in data visualizations to ensure clarity and distinction between different data points.

Recommended combinations

Deep Plains

Creates a sense of vast depth and clear contrast, ideal for structured layouts.

#2E3D4A · #5A6E7D · #E3EAF2

Silvery Dust

Offers subtle, ethereal transitions, perfect for atmospheric backgrounds or delicate UI elements.

#8C9FB0 · #BACADE · #E3EAF2

Cosmic Horizon

Provides a balanced, modern gradient, suitable for clean interfaces and sophisticated branding.

#2E3D4A · #8C9FB0 · #BACADE

CSS variables

:root {
  --lunar-dust-plains-1: #2e3d4a;
  --lunar-dust-plains-2: #5a6e7d;
  --lunar-dust-plains-3: #8c9fb0;
  --lunar-dust-plains-4: #bacade;
  --lunar-dust-plains-5: #e3eaf2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-dust-plains": {
        1: "#2e3d4a",
        2: "#5a6e7d",
        3: "#8c9fb0",
        4: "#bacade",
        5: "#e3eaf2",
      }
    }
  }
}

Hex values

Color 1#2e3d4a

Color 2#5a6e7d

Color 3#8c9fb0

Color 4#bacade

Color 5#e3eaf2

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

6.7:1AA

9.2:1AAA

2.1:1Fail

1.9:1Fail

3.2:1AA18

4.4:1AA18

4.1:1AA18

1.9:1Fail

1.6:1Fail

2.2:1Fail

6.7:1AA

3.2:1AA18

1.6:1Fail

1.4:1Fail

9.2:1AAA

4.4:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Lunar Dust Plains

Ancient Temple Stones

Architectural Concrete Edge