Palette

Selene's Crater Dust

A monochromatic exploration of the lunar surface, from dark craters to soft, illuminated dust.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Selene's Crater Dust 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 Selene's Crater Dust.

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

Data visualization

#2F3640#525E6E#7B8CA1#A3B5CA#D5E0EB

Palette guide

How to use Selene's Crater Dust

Overview

The 'Selene's Crater Dust' palette offers a refined monochromatic journey inspired by lunar landscapes. This sophisticated collection ranges from the deep, anchoring charcoal of #2F3640 to the soft, ethereal silver of #D5E0EB. Its subtle gradations, including the mid-tones like #525E6E and #7B8CA1, provide a professional and minimalist aesthetic perfect for creating elegant digital interfaces or sophisticated branding. Designers and developers will find this palette excellent for establishing a cohesive, muted theme that exudes calm and precision, making it ideal for high-tech or luxury applications where understated elegance is key. The precise steps between #A3B5CA and its darker counterparts ensure smooth transitions and visual harmony.

Best used for

Corporate websites and branding
High-tech product interfaces (UI/UX)
Luxury brand identity and packaging
Minimalist web design and portfolios
Backgrounds and subtle texture elements
Professional documentation and reports

Suggested color roles

primary

#2F3640 - Use as the foundational dark color for headers, main navigation, or dominant UI elements to establish a strong, professional anchor.

secondary

#525E6E - Ideal for subheadings, active states, or secondary content blocks, providing depth without overwhelming the primary color.

accent

#A3B5CA - Employ sparingly for subtle highlights, interactive elements, or to draw attention to key information without introducing a stark contrast.

background

#D5E0EB - Perfect for clean, light backgrounds, providing a soft canvas that allows darker text and elements to stand out clearly.

text

#2F3640 - The darkest shade ensures excellent readability against lighter backgrounds like #D5E0EB for body text and important labels.

Accessibility notes

Ensure sufficient contrast between #2F3640 text and #D5E0EB backgrounds for WCAG AA compliance.
Avoid using #A3B5CA or #D5E0EB for small text elements on light backgrounds due to potential low contrast.
Verify interactive elements using #525E6E against #D5E0EB meet minimum contrast ratios for visibility.
Consider providing a high-contrast mode for users, potentially using pure black or white text with these shades.

Recommended combinations

Dark Base UI

Excellent for dark mode interfaces, setting a deep, sophisticated tone for primary elements and secondary content.

#2F3640 · #525E6E · #7B8CA1

Subtle Gradient

Creates smooth, elegant gradients for backgrounds, hero sections, or subtle visual transitions, evoking a sense of calm.

#7B8CA1 · #A3B5CA · #D5E0EB

Highlight Contrast

Use #2F3640 for text on #D5E0EB background, with #A3B5CA for interactive elements or subtle call-to-actions.

#2F3640 · #D5E0EB · #A3B5CA

CSS variables

:root {
  --selene-s-crater-dust-1: #2F3640;
  --selene-s-crater-dust-2: #525E6E;
  --selene-s-crater-dust-3: #7B8CA1;
  --selene-s-crater-dust-4: #A3B5CA;
  --selene-s-crater-dust-5: #D5E0EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "selene-s-crater-dust": {
        1: "#2F3640",
        2: "#525E6E",
        3: "#7B8CA1",
        4: "#A3B5CA",
        5: "#D5E0EB",
      }
    }
  }
}

Hex values

Color 1#2F3640

Color 2#525E6E

Color 3#7B8CA1

Color 4#A3B5CA

Color 5#D5E0EB

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

5.8:1AA

9.1:1AAA

1.8:1Fail

1.9:1Fail

3.1:1AA18

4.9:1AA

3.5:1AA18

1.9:1Fail

1.6:1Fail

2.6:1Fail

5.8:1AA

3.1:1AA18

1.6:1Fail

9.1:1AAA

4.9:1AA

2.6:1Fail

1.6:1Fail

Similar palettes

More like Selene's Crater Dust

Selene's Crater Dust

See it in context.

Ready when you are.

Built with Selene's Crater Dust.

How to use Selene's Crater Dust

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dark Base UI

Subtle Gradient

Highlight Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Selene's Crater Dust