Palette

Moonlit Cloud Bloom

A gentle, airy palette that captures the soft, dreamlike beauty of flowers blooming under a moonlit sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Cloud Bloom 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 Moonlit Cloud Bloom.

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

Data visualization

#e6e6fa#add8e6#dcdcdc#f8f8ff#f0f8ff

Palette guide

How to use Moonlit Cloud Bloom

Overview

The Moonlit Cloud Bloom palette offers a dreamy and ethereal collection of soft, light colors, perfect for creating calm and delicate designs. Featuring gentle hues like #e6e6fa (lavender blush), #add8e6 (light sky blue), #dcdcdc (gainsboro grey), #f8f8ff (ghost white), and #f0f8ff (alice blue), this palette evokes the tranquil beauty of flowers blooming under a soft, moonlit sky. It's an excellent choice for designers and developers aiming for a serene, airy, and inviting aesthetic across various digital and print applications, emphasizing subtlety and lightness.

Best used for

Baby product branding and packaging
Wedding invitations and stationery
Spa and wellness website design
Delicate illustrations and art prints
Serene interior design concepts
Minimalist user interfaces for calm apps

Suggested color roles

primary

Use #add8e6 as a soft, inviting base for main content areas or interactive elements, providing a gentle focal point.

secondary

Employ #e6e6fa for supporting backgrounds, headers, or decorative accents to maintain an airy feel.

accent

Utilize #dcdcdc sparingly for subtle borders, icons, or secondary information, offering a hint of grounding.

background

Leverage #f8f8ff or #f0f8ff as the primary background color for a clean, expansive, and ethereal canvas.

text

For optimal readability on these light backgrounds, use a dark charcoal or black. For larger display text, #add8e6 can be considered.

Accessibility notes

Due to the light nature of this palette, ensure sufficient contrast for all text, especially smaller body text, against backgrounds.
Pair the darkest possible text (e.g., charcoal or black) with #f8f8ff or #f0f8ff for WCAG AA compliance.
Avoid using light colors like #dcdcdc or #e6e6fa for body text on #f8f8ff backgrounds.
For interactive elements, ensure hover/active states provide clear visual feedback beyond just color changes.

Recommended combinations

Airy Calm

Ideal for pristine backgrounds with soft, dreamy content blocks.

#F8F8FF · #ADD8E6 · #E6E6FA

Gentle Sky

Perfect for subtle layering, creating depth without losing lightness.

#F0F8FF · #ADD8E6 · #DCDCDC

Bloom Whisper

Great for delicate accents and a cohesive, soft visual flow.

#E6E6FA · #F8F8FF · #ADD8E6

CSS variables

:root {
  --moonlit-cloud-bloom-1: #e6e6fa;
  --moonlit-cloud-bloom-2: #add8e6;
  --moonlit-cloud-bloom-3: #dcdcdc;
  --moonlit-cloud-bloom-4: #f8f8ff;
  --moonlit-cloud-bloom-5: #f0f8ff;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-cloud-bloom": {
        1: "#e6e6fa",
        2: "#add8e6",
        3: "#dcdcdc",
        4: "#f8f8ff",
        5: "#f0f8ff",
      }
    }
  }
}

Hex values

Color 1#e6e6fa

Color 2#add8e6

Color 3#dcdcdc

Color 4#f8f8ff

Color 5#f0f8ff

Accessibility

Contrast checker

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

1:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1:1Fail

Similar palettes

More like Moonlit Cloud Bloom

Moonlit Cloud Bloom

See it in context.

Ready when you are.

Built with Moonlit Cloud Bloom.

How to use Moonlit Cloud Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Airy Calm

Gentle Sky

Bloom Whisper

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Moonlit Cloud Bloom