Palette

Lunar Dust Voyage

A muted, reflective journey through the subtle textures and pale light of the lunar surface.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#7F8C8D#BDC3C7#ECF0F1#F8F9F9

Palette guide

How to use Lunar Dust Voyage

Overview

The 'Lunar Dust Voyage' palette offers a muted, reflective journey through the subtle textures and pale light of the lunar surface. This versatile collection ranges from the deep blue-grey #2C3E50 to the airy #F8F9F9, encompassing balanced mid-tones like #7F8C8D and #BDC3C7. Designers and developers will find this palette excellent for creating sophisticated, clean, and modern designs. Its cool and understated nature provides a polished foundation for corporate branding, minimalist user interfaces, or any project aiming for a professional yet inviting aesthetic with a touch of elegance.

Best used for

Corporate websites and professional services
Educational platforms and e-learning interfaces
Minimalist e-commerce stores and product pages
Modern architecture and design portfolios
Clean app interfaces and productivity tools
Professional presentations and reports

Suggested color roles

primary

Utilize #2C3E50 as a strong, professional primary color for headings, important buttons, or foundational elements.

secondary

Apply #7F8C8D for supportive text, subheadings, or secondary content blocks, offering a muted mid-tone.

accent

Use #BDC3C7 as a gentle accent for subtle highlights, divider lines, or inactive states of UI components.

background

Choose #F8F9F9 for a bright, clean, and expansive main background, providing excellent contrast for darker text.

text

Employ #2C3E50 for primary body text on light backgrounds to ensure strong readability and a cohesive professional look.

Accessibility notes

#2C3E50 on #F8F9F9 provides excellent contrast, making it ideal for primary text and ensuring readability.
#7F8C8D on #ECF0F1 or #F8F9F9 offers good contrast for secondary text, but always verify for specific usage.
Avoid using #BDC3C7 or #ECF0F1 for small text on very light backgrounds as contrast might be insufficient.
Ensure interactive elements maintain a 3:1 contrast ratio with adjacent colors, especially when using lighter shades for states.

Recommended combinations

Professional Base

Creates a clean, readable foundation for web pages, blending light backgrounds with a strong primary color.

#F8F9F9 · #ECF0F1 · #2C3E50

Muted Harmony

Ideal for balanced depth in content blocks or UI cards, offering subtle visual separation.

#BDC3C7 · #7F8C8D · #2C3E50

Light UI

Suitable for creating light, airy interface components like navigation or subtle background textures.

#ECF0F1 · #BDC3C7 · #7F8C8D

CSS variables

:root {
  --lunar-dust-voyage-1: #2C3E50;
  --lunar-dust-voyage-2: #7F8C8D;
  --lunar-dust-voyage-3: #BDC3C7;
  --lunar-dust-voyage-4: #ECF0F1;
  --lunar-dust-voyage-5: #F8F9F9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-dust-voyage": {
        1: "#2C3E50",
        2: "#7F8C8D",
        3: "#BDC3C7",
        4: "#ECF0F1",
        5: "#F8F9F9",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#7F8C8D

Color 3#BDC3C7

Color 4#ECF0F1

Color 5#F8F9F9

Accessibility

Contrast checker

3.2:1AA18

6.2:1AA

9.6:1AAA

10.4:1AAA

3.2:1AA18

2:1Fail

3:1AA18

3.3:1AA18

6.2:1AA

2:1Fail

1.6:1Fail

1.7:1Fail

9.6:1AAA

3:1AA18

1.6:1Fail

1.1:1Fail

10.4:1AAA

3.3:1AA18

1.7:1Fail

1.1:1Fail

Similar palettes

More like Lunar Dust Voyage