Back to palettes

Palette

Clouded Moon Reflection

Subtle, diffused grays and blues reflecting the gentle, hazy glow of the moon behind a veil of clouds.

NeutralCalm5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clouded Moon Reflection 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 Clouded Moon Reflection.

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

Data visualization

#7F8B9C#A2AEBD#C7D1DC#677482#525E6A

Palette guide

How to use Clouded Moon Reflection

Overview

The Clouded Moon Reflection palette offers a sophisticated blend of subtle, diffused grays and blues, evoking the tranquil glow of the moon behind clouds. This neutral collection, featuring shades like the serene #7F8B9C, the lighter #A2AEBD, and the grounding #525E6A, is ideal for creating designs that exude calm and understated elegance. Developers will find these hex codes versatile for modern interfaces, while designers can leverage their muted quality to craft sophisticated branding, serene digital environments, or tranquil print materials. The soft yet distinct variations provide depth without overwhelming, making #C7D1DC a perfect light background and #677482 a readable text option.

Best used for

  • minimalist UI design
  • corporate branding
  • tranquil interior spaces
  • sophisticated websites and apps
  • editorial layouts
  • luxury product packaging

Suggested color roles

primary

#7F8B9C - A balanced, medium grey-blue, excellent for main content areas or brand primary elements, offering a sense of stability.

secondary

#A2AEBD - A lighter, supportive shade, perfect for secondary navigation, subheadings, or complementary graphic elements.

accent

#525E6A - The deepest tone, ideal for call-to-action buttons, important icons, or adding a touch of sophisticated contrast.

background

#C7D1DC - The lightest shade, providing an airy and clean canvas for content, ensuring legibility and a soft aesthetic.

text

#677482 - A darker, muted grey-blue that offers good readability against lighter backgrounds like #C7D1DC or #A2AEBD.

Accessibility notes

  • Ensure sufficient contrast between text in #677482 and background #C7D1DC for WCAG AA compliance.
  • Avoid using #A2AEBD for small text sizes, especially on backgrounds like #C7D1DC, as contrast may be insufficient.
  • Use #525E6A for important interactive elements to ensure visual distinction and higher contrast.
  • Verify all foreground-background color pairs meet minimum contrast ratios for readability, particularly for body text.

Recommended combinations

Hazy Interface

For clean, modern web interfaces where softness and clarity are paramount, using light tones for structure.

#C7D1DC · #A2AEBD · #7F8B9C

Deep Serenity

To create depth and sophistication in headers or footers, leveraging darker shades with a lighter accent.

#525E6A · #677482 · #A2AEBD

Subtle Depth

Ideal for content blocks or section dividers, offering subtle visual separation without harsh lines.

#7F8B9C · #A2AEBD · #677482

CSS variables

:root {
  --clouded-moon-reflection-1: #7F8B9C;
  --clouded-moon-reflection-2: #A2AEBD;
  --clouded-moon-reflection-3: #C7D1DC;
  --clouded-moon-reflection-4: #677482;
  --clouded-moon-reflection-5: #525E6A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clouded-moon-reflection": {
        1: "#7F8B9C",
        2: "#A2AEBD",
        3: "#C7D1DC",
        4: "#677482",
        5: "#525E6A",
      }
    }
  }
}

Related searches

calm grey blue palettesubtle neutral colorsmoon inspired paletteminimalist web design colorscorporate blue grey scheme

Palette colors

Hex values

Color 1#7F8B9C
·
Color 2#A2AEBD
·
Color 3#C7D1DC
·
Color 4#677482
·
Color 5#525E6A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
1.4:1Fail
1.9:1Fail
2
1.5:1Fail
1.5:1Fail
2.1:1Fail
2.9:1Fail
3
2.2:1Fail
1.5:1Fail
3.1:1AA18
4.3:1AA18
4
1.4:1Fail
2.1:1Fail
3.1:1AA18
1.4:1Fail
5
1.9:1Fail
2.9:1Fail
4.3:1AA18
1.4:1Fail

Similar palettes

More like Clouded Moon Reflection

View all Neutral
Whispering Willow Grove
Coastal Fog Morning
Coastal Stone Hearth
Foggy Pine Retreat
Misty Morning Fog
Misty Morning Haze