Back to palettes

Palette

Dreamy Cloudscape Haze

A soft, ethereal palette inspired by a gentle sky filled with drifting, pastel-hued clouds.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dreamy Cloudscape Haze 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 Dreamy Cloudscape Haze.

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

Data visualization

#ADD8E6#E0FFFF#D3D3D3#D8BFD8#F5F5F5

Palette guide

How to use Dreamy Cloudscape Haze

Overview

The Dreamy Cloudscape Haze palette, featuring soft hues like #ADD8E6, #E0FFFF, and #D3D3D3, captures the serene beauty of a sky filled with drifting, pastel-hued clouds. This collection is ideal for designers and developers aiming to create calm, ethereal, and gentle digital experiences. The subtle interplay of light blues, soft greys, and a hint of lavender from #D8BFD8 allows for a nuanced aesthetic that feels both expansive and comforting. With #F5F5F5 providing a near-white base, this palette supports excellent readability when combined with dark text, fostering an atmosphere of tranquility across websites, apps, or branding materials.

Best used for

  • Wellness and mindfulness applications
  • Lounge or spa branding
  • Photography portfolios (nature, ethereal)
  • Minimalist fashion websites
  • Children's room decor inspiration
  • Serene background graphics

Suggested color roles

primary

#ADD8E6 (Light Blue): A gentle yet distinct primary color, suitable for main sections or prominent UI elements, setting a calm tone.

secondary

#D3D3D3 (Light Grey): A versatile neutral for subheadings, subtle dividers, or background panels, providing balance.

accent

#D8BFD8 (Thistle): Offers a soft, unexpected touch of lavender, perfect for delicate highlights or interactive elements.

background

#F5F5F5 (White Smoke): An airy, almost white base that provides a clean canvas and enhances the overall lightness.

text

A deep charcoal like #333333 or pure black will provide optimal contrast and legibility against these light hues.

Accessibility notes

  • All colors are very light; ensure any text placed directly on these colors uses a very dark contrasting color for readability.
  • Avoid using #F5F5F5 or #E0FFFF for text, as they lack sufficient contrast against most backgrounds.
  • When pairing #ADD8E6 with #D3D3D3, ensure there's enough differentiation for visual clarity.
  • Always check WCAG 2.1 AA contrast ratios for text and interactive elements, especially for smaller fonts.

Recommended combinations

Hazy Sky

Ideal for creating soft, gradient backgrounds or expansive hero sections that evoke a clear, open sky.

#ADD8E6 · #E0FFFF · #F5F5F5

Subtle Contrast

Use for content cards, subtle UI elements, or accent panels to add depth without losing the overall ethereal feel.

#D3D3D3 · #D8BFD8 · #ADD8E6

Calm Layout

Apply #ADD8E6 for headings, #F5F5F5 as the main background, and dark text for a serene yet highly readable interface.

#ADD8E6 · #F5F5F5 · #D3D3D3

CSS variables

:root {
  --dreamy-cloudscape-haze-1: #ADD8E6;
  --dreamy-cloudscape-haze-2: #E0FFFF;
  --dreamy-cloudscape-haze-3: #D3D3D3;
  --dreamy-cloudscape-haze-4: #D8BFD8;
  --dreamy-cloudscape-haze-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-cloudscape-haze": {
        1: "#ADD8E6",
        2: "#E0FFFF",
        3: "#D3D3D3",
        4: "#D8BFD8",
        5: "#F5F5F5",
      }
    }
  }
}

Related searches

dreamy pastel cloud paletteserene light blue greyethereal UI color schemesoft sky branding colorscalm lavender blue palette

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#E0FFFF
·
Color 3#D3D3D3
·
Color 4#D8BFD8
·
Color 5#F5F5F5
·

Accessibility

Contrast checker

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

Similar palettes

More like Dreamy Cloudscape Haze

View all pastel
Cloud Puff Dream
Cloudscape Dreamy Soft
Dreamy Cloudscape Pastels
Dreamy Pastel Sunset
Celestial Blush
Cloud Blossom Breeze