Back to palettes

Palette

Ethereal Cloud Dream

Weightless pastels in blues, purples, and whites, capturing the gentle, floating beauty of a sky full of clouds.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ethereal Cloud Dream 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 Ethereal Cloud Dream.

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

Data visualization

#E6E6FA#F0F8FF#ADD8E6#B0C4DE#D8BFD8

Palette guide

How to use Ethereal Cloud Dream

Overview

The Ethereal Cloud Dream palette offers a serene collection of weightless pastels, perfect for designs seeking a calm and dreamy aesthetic. Featuring soft blues like #F0F8FF (Alice Blue) and #ADD8E6 (Light Blue), alongside gentle purples such as #E6E6FA (Lavender Blush) and #D8BFD8 (Thistle), this palette evokes the peaceful beauty of a sky full of clouds. Its muted tones, including #B0C4DE (Light Steel Blue), are ideal for creating a sense of spaciousness and tranquility. Designers and developers can leverage these harmonious colors to build interfaces or branding that feels light, airy, and inviting, promoting relaxation and understated elegance. This guide provides practical applications for each hue to maximize its impact.

Best used for

  • Wellness and meditation app interfaces
  • Children's book illustrations and nursery decor
  • Spa and beauty brand identities
  • Wedding stationery and event branding
  • Healthcare website designs
  • Minimalist fashion or lifestyle blogs

Suggested color roles

primary

#F0F8FF (Alice Blue) - Use as the dominant background or canvas color to establish a clean, airy foundation. Its near-white quality provides excellent contrast for darker elements.

secondary

#B0C4DE (Light Steel Blue) - Ideal for large content blocks, sidebars, or card backgrounds. It offers a subtle depth without overpowering the primary, maintaining the ethereal mood.

accent

#ADD8E6 (Light Blue) - Apply sparingly for interactive elements like buttons, links, or progress indicators to draw attention gently. Its fresh tone adds a touch of vibrancy.

background

#E6E6FA (Lavender Blush) - Perfect for full-page backgrounds where a very subtle hint of color is desired over pure white, creating a soft, inviting atmosphere.

text

#333333 (Charcoal) for primary readability on light backgrounds. For secondary text or subtle labels, use a dark navy or the darkest palette color like #B0C4DE on lighter backgrounds, ensuring sufficient contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter pastels. Test dark gray text on #F0F8FF or #E6E6FA.
  • Avoid using light blues like #ADD8E6 or #B0C4DE for small text on #F0F8FF backgrounds, as contrast will be poor.
  • Reserve #D8BFD8 (Thistle) for larger headings or decorative elements rather than body text due to its low contrast with many palette colors.
  • Provide alternative text or visual cues for color-dependent information, as some users may struggle to differentiate between the subtle pastel shades.

Recommended combinations

Sky Gradient

Excellent for backgrounds, headers, or hero sections where a smooth, calming transition from light to slightly deeper blue is desired.

#F0F8FF · #ADD8E6 · #B0C4DE

Gentle Contrast

Use #E6E6FA as a soft background, #D8BFD8 for large visual elements, and #ADD8E6 for subtle highlights or interactive icons.

#E6E6FA · #D8BFD8 · #ADD8E6

Dreamy Layers

Ideal for layering content, with #F0F8FF as the base, #B0C4DE for card elements, and #E6E6FA for decorative accents or hover states.

#F0F8FF · #B0C4DE · #E6E6FA

CSS variables

:root {
  --ethereal-cloud-dream-1: #E6E6FA;
  --ethereal-cloud-dream-2: #F0F8FF;
  --ethereal-cloud-dream-3: #ADD8E6;
  --ethereal-cloud-dream-4: #B0C4DE;
  --ethereal-cloud-dream-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-cloud-dream": {
        1: "#E6E6FA",
        2: "#F0F8FF",
        3: "#ADD8E6",
        4: "#B0C4DE",
        5: "#D8BFD8",
      }
    }
  }
}

Related searches

soft pastel color schemesdreamy blue and purple palettelight cloud aesthetic colorscalm ethereal design palettegentle peaceful UI colors

Palette colors

Hex values

Color 1#E6E6FA
·
Color 2#F0F8FF
·
Color 3#ADD8E6
·
Color 4#B0C4DE
·
Color 5#D8BFD8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.4:1Fail
2
1.1:1Fail
1.4:1Fail
1.7:1Fail
1.6:1Fail
3
1.2:1Fail
1.4:1Fail
1.2:1Fail
1.1:1Fail
4
1.4:1Fail
1.7:1Fail
1.2:1Fail
1:1Fail
5
1.4:1Fail
1.6:1Fail
1.1:1Fail
1:1Fail

Similar palettes

More like Ethereal Cloud Dream

View all pastel
Cloud Whisper Bloom
Pastel Cloud Canvas
Pastel Cloud Dream
Celestial Cloud Shimmer
Celestial Dream Dust
Cloud Puff Dream