Palette

Dreamy Cloud Haze

Soft, ethereal blues and whites capturing the serene essence of a cloudy sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0E0E6#ADD8E6#E0FFFF#F0FFFF#F5F5F5

Palette guide

How to use Dreamy Cloud Haze

Overview

The Dreamy Cloud Haze palette, featuring serene blues and whites like #B0E0E6, #ADD8E6, and #E0FFFF, captures the tranquil essence of a peaceful sky. This collection is perfect for designers and developers seeking to create calm, airy, and inviting digital experiences. The soft, ethereal quality of these hex codes makes them ideal for backgrounds, subtle UI elements, and soothing visual content. With #F0FFFF and #F5F5F5 offering near-white bases, this palette ensures excellent readability when paired with dark text, fostering a sense of serenity and lightness across websites, apps, or brand materials. Embrace this palette for a truly tranquil aesthetic.

Best used for

Wellness and mindfulness apps
Spa or relaxation brand identities
Children's book illustrations
Minimalist website designs
Cloud-themed digital art
Interior design inspiration platforms

Suggested color roles

primary

#B0E0E6 (Powder Blue): A gentle, yet distinct primary color for main sections or prominent UI elements, establishing calm.

secondary

#ADD8E6 (Light Blue): A versatile supporting shade, excellent for secondary buttons, subheadings, or background panels.

accent

#E0FFFF (Light Cyan): Use for subtle highlights, interactive elements, or to add a delicate shimmer to your designs.

background

#F5F5F5 (White Smoke): A very light, almost white background that provides a clean canvas and enhances readability.

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 #F0FFFF or #F5F5F5 for text, as they lack sufficient contrast against most backgrounds.
Ensure interactive elements using #B0E0E6 or #ADD8E6 have a clear focus state with adequate contrast.
When designing, always check text-to-background contrast ratios, especially for smaller font sizes.

Recommended combinations

Sky Gradient

Perfect for subtle background gradients, hero sections, or large visual elements to create a soft, expansive feel.

#B0E0E6 · #ADD8E6 · #E0FFFF

Cloud Base

Ideal for clean, minimalist layouts, providing a light background with subtle variations for content blocks or cards.

#F5F5F5 · #F0FFFF · #E0FFFF

Serene Interaction

Use #B0E0E6 for buttons or active states, with #F5F5F5 as the background, and dark text for clear calls to action.

#B0E0E6 · #F5F5F5 · #E0FFFF

CSS variables

:root {
  --dreamy-cloud-haze-1: #B0E0E6;
  --dreamy-cloud-haze-2: #ADD8E6;
  --dreamy-cloud-haze-3: #E0FFFF;
  --dreamy-cloud-haze-4: #F0FFFF;
  --dreamy-cloud-haze-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-cloud-haze": {
        1: "#B0E0E6",
        2: "#ADD8E6",
        3: "#E0FFFF",
        4: "#F0FFFF",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#B0E0E6

Color 2#ADD8E6

Color 3#E0FFFF

Color 4#F0FFFF

Color 5#F5F5F5

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.5:1Fail

1.4:1Fail

1:1Fail

1.4:1Fail

1.5:1Fail

1:1Fail

1.1:1Fail

1.3:1Fail

1.4:1Fail

1:1Fail

1.1:1Fail

Similar palettes

More like Dreamy Cloud Haze

Ethereal Celestial Cloud

Dreamy Cloud Haze

See it in context.

Ready when you are.

Built with Dreamy Cloud Haze.

How to use Dreamy Cloud Haze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Gradient

Cloud Base

Serene Interaction

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dreamy Cloud Haze