Back to palettes

Palette

Astral Moonstone Hues

A tranquil journey through cool greys and subtle lavenders, echoing the quiet glow of moonstone under a starlit sky.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Astral Moonstone Hues 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 Astral Moonstone Hues.

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

Data visualization

#2E2F40#5B5F7F#8F94B5#C3C9DD#E4E7F0

Palette guide

How to use Astral Moonstone Hues

Overview

The Astral Moonstone Hues palette offers a tranquil journey through cool greys and subtle lavenders, echoing the quiet glow of moonstone under a starlit sky. Ranging from the deep blue-gray of #2E2F40, through the supporting #5B5F7F and #8F94B5, to the ethereal lightness of #C3C9DD and #E4E7F0. This minimalist and serene palette is ideal for designers and developers creating luxury branding, tranquil app interfaces, or sophisticated digital environments. It provides a sense of calm, purity, and understated elegance, perfect for projects requiring a refined, celestial touch.

Best used for

  • Minimalist luxury branding
  • High-end skincare websites
  • Tranquil app interfaces
  • Serene home decor concepts
  • Celestial-themed products
  • Sophisticated photography portfolios

Suggested color roles

primary

#2E2F40 serves as a deep, grounding primary color, ideal for main headings and foundational design elements.

secondary

#5B5F7F provides supportive depth, excellent for subheadings or secondary content blocks.

accent

#C3C9DD offers a soft, lunar highlight, perfect for delicate accents, subtle borders, or interactive elements.

background

#E4E7F0 creates a clean, airy, and light background, ensuring excellent readability for darker text.

text

#2E2F40 ensures optimal legibility for primary text on lighter backgrounds, or use #5B5F7F for secondary text.

Accessibility notes

  • Ensure sufficient contrast for text, especially #2E2F40 on #E4E7F0, to meet WCAG AA standards.
  • Avoid using #C3C9DD for small text on #E4E7F0 backgrounds due to low contrast.
  • Test legibility of lighter shades for secondary text, ensuring they remain readable.
  • Provide clear visual cues for interactive elements, possibly using a slightly darker shade for hover states.

Recommended combinations

Lunar Glow

A balanced and serene combination, ideal for creating a calm and sophisticated page layout.

#E4E7F0 · #C3C9DD · #2E2F40

Serene Depth

Highlights deeper, tranquil tones, suitable for artistic elements or distinctive branding.

#5B5F7F · #8F94B5 · #2E2F40

Moonstone Gradient

Perfect for backgrounds or large design areas that require a smooth, contemporary transition.

#2E2F40 · #5B5F7F · #8F94B5

CSS variables

:root {
  --astral-moonstone-hues-1: #2E2F40;
  --astral-moonstone-hues-2: #5B5F7F;
  --astral-moonstone-hues-3: #8F94B5;
  --astral-moonstone-hues-4: #C3C9DD;
  --astral-moonstone-hues-5: #E4E7F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-moonstone-hues": {
        1: "#2E2F40",
        2: "#5B5F7F",
        3: "#8F94B5",
        4: "#C3C9DD",
        5: "#E4E7F0",
      }
    }
  }
}

Related searches

moonstone color palettecelestial grey lavendersminimalist cool tonesserene UI designtranquil branding

Palette colors

Hex values

Color 1#2E2F40
·
Color 2#5B5F7F
·
Color 3#8F94B5
·
Color 4#C3C9DD
·
Color 5#E4E7F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
8:1AAA
10.6:1AAA
2
2.1:1Fail
2.1:1Fail
3.8:1AA18
5:1AA
3
4.4:1AA18
2.1:1Fail
1.8:1Fail
2.4:1Fail
4
8:1AAA
3.8:1AA18
1.8:1Fail
1.3:1Fail
5
10.6:1AAA
5:1AA
2.4:1Fail
1.3:1Fail

Similar palettes

More like Astral Moonstone Hues

View all cool
Geode Crystal Veins
Wet Stone Stream
Arctic Fox Fur
Arctic Fox Snow
Arctic Glacier Shard
Arctic Glacier Veil