Back to palettes

Palette

Lunar Dust Trail

Soft, ethereal blues and greys conjure images of fine lunar dust trailing across the moon's surface.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C6E7F#839BAF#AEC5DA#D9EAF7#F0F6FA

Palette guide

How to use Lunar Dust Trail

Overview

The 'Lunar Dust Trail' palette evokes soft, ethereal blues and greys, reminiscent of fine lunar dust. This cool-toned collection transitions gracefully from the deep blue-grey of #5C6E7F through the gentle #AEC5DA to the airy #F0F6FA. It's an excellent choice for projects seeking a calm, sophisticated, and expansive feel. Designers and developers can leverage its harmonious gradient-like quality to create serene user interfaces, tranquil branding, or atmospheric digital experiences. The palette's subtle shifts offer depth and refinement, perfect for conveying a sense of peace and clarity.

Best used for

  • Wellness and mindfulness applications
  • Luxury travel and hospitality branding
  • Scientific and astronomical visualizations
  • Serene interior design concepts
  • Ethereal wedding and event themes
  • Modern tech company interfaces

Suggested color roles

primary

Utilize #5C6E7F as a deep, stable primary color for headers, important buttons, or foundational elements.

secondary

Apply #839BAF for supportive elements, subheadings, or secondary content blocks, offering a slightly softer presence.

accent

Use #AEC5DA as a gentle accent for highlights, hover states, or subtle graphical elements.

background

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

text

Employ #5C6E7F for primary body text on light backgrounds to ensure strong readability and maintain a cool aesthetic.

Accessibility notes

  • Ensure #5C6E7F text has sufficient contrast against #D9EAF7 or #F0F6FA backgrounds for optimal readability.
  • The lighter shades like #D9EAF7 and #F0F6FA offer extremely low contrast with each other; avoid pairing them for text.
  • Prioritize #5C6E7F for important textual content to maintain readability on lighter backgrounds within the palette.
  • Always test interactive element states (e.g., hover, focus) for adequate contrast ratios to meet accessibility guidelines.

Recommended combinations

Ethereal Sky

Creates a light, airy background and content scheme, perfect for a soft and expansive feel.

#F0F6FA · #D9EAF7 · #AEC5DA

Deep Horizon

Provides a rich, contemplative mood suitable for hero sections or sophisticated data displays.

#5C6E7F · #839BAF · #AEC5DA

Subtle Gradient

Ideal for smooth transitions in UI elements, creating a sense of natural flow and depth.

#D9EAF7 · #AEC5DA · #839BAF

CSS variables

:root {
  --lunar-dust-trail-1: #5C6E7F;
  --lunar-dust-trail-2: #839BAF;
  --lunar-dust-trail-3: #AEC5DA;
  --lunar-dust-trail-4: #D9EAF7;
  --lunar-dust-trail-5: #F0F6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-dust-trail": {
        1: "#5C6E7F",
        2: "#839BAF",
        3: "#AEC5DA",
        4: "#D9EAF7",
        5: "#F0F6FA",
      }
    }
  }
}

Related searches

calm blue grey paletteethereal web design colorsspace-themed UI kitcool tone branding palettesoft blue grey color scheme

Palette colors

Hex values

Color 1#5C6E7F
·
Color 2#839BAF
·
Color 3#AEC5DA
·
Color 4#D9EAF7
·
Color 5#F0F6FA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3:1Fail
4.3:1AA18
4.8:1AA
2
1.8:1Fail
1.6:1Fail
2.3:1Fail
2.6:1Fail
3
3:1Fail
1.6:1Fail
1.4:1Fail
1.6:1Fail
4
4.3:1AA18
2.3:1Fail
1.4:1Fail
1.1:1Fail
5
4.8:1AA
2.6:1Fail
1.6:1Fail
1.1:1Fail

Similar palettes

More like Lunar Dust Trail

View all cool
Celestial Aurora Dream
Celestial Aurora Whisper
Celestial Shimmer
Celestial Veil Haze
Orion Cloud Veil
Stellar Cloudscape