Back to palettes

Palette

Pastel Cloud Dream

Gentle and airy, like floating amongst a sky filled with wisps of cotton candy clouds.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#ADD8E6#B0E0E6#F0F8FF#F8F8FF

Palette guide

How to use Pastel Cloud Dream

Overview

The Pastel Cloud Dream palette offers an ethereal and serene collection of cool, soft blues and near-whites, perfectly evoking a sky filled with wispy cotton candy clouds. This palette features crisp LightCyan (#E0FFFF), calming LightBlue (#ADD8E6), gentle PowderBlue (#B0E0E6), and airy AliceBlue (#F0F8FF), with GhostWhite (#F8F8FF) serving as a foundational light tone. It's designed for projects that require a tranquil, spacious, and minimalist aesthetic. Designers and developers can leverage these harmonious hues to craft soothing user experiences, elegant brand identities, or delicate visual content that feels both serene and refined.

Best used for

  • Meditation and mindfulness app interfaces
  • Wellness brand identities and websites
  • Minimalist web design and digital art
  • Tranquil interior spaces and decor inspiration
  • Winter-themed graphics and seasonal campaigns
  • Serene digital art and illustrations

Suggested color roles

primary

Utilize LightCyan (#E0FFFF) as a cool, expansive base for main sections or prominent features, reflecting openness and calm.

secondary

LightBlue (#ADD8E6) provides a slightly deeper, calming blue, excellent for secondary backgrounds, headers, or informational panels.

accent

PowderBlue (#B0E0E6) introduces a subtle, gentle emphasis, ideal for icons, interactive elements, or small decorative details.

background

AliceBlue (#F0F8FF) offers an extremely light and airy canvas, ensuring content feels open and uncluttered, enhancing readability.

text

A dark gray or a muted navy (e.g., #36454F) will provide essential clarity for body text, ensuring legibility against the light palette.

Accessibility notes

  • The entire palette is very light; high contrast text (dark colors) is crucial for all readability, especially for small text.
  • Avoid using these light colors for critical information or interactive elements where clarity is paramount.
  • When layering colors, test contrast ratios for both foreground and background elements to meet WCAG standards.
  • Consider providing alternative text representations or larger hit areas for elements relying solely on color distinction.

Recommended combinations

Sky Layers

Perfect for seamless, airy backgrounds, gradients, or layered graphical elements that evoke a clear, open sky.

#E0FFFF · #ADD8E6 · #F0F8FF

Gentle Depth

Combine for subtle visual hierarchy in UI components, card backgrounds, or soft illustrations needing gentle distinction.

#B0E0E6 · #F8F8FF · #ADD8E6

Cloud Whispers

Use for delicate gradients, overlays, or background textures that need a soft, almost imperceptible blend.

#F0F8FF · #E0FFFF · #B0E0E6

CSS variables

:root {
  --pastel-cloud-dream-1: #E0FFFF;
  --pastel-cloud-dream-2: #ADD8E6;
  --pastel-cloud-dream-3: #B0E0E6;
  --pastel-cloud-dream-4: #F0F8FF;
  --pastel-cloud-dream-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-dream": {
        1: "#E0FFFF",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#F0F8FF",
        5: "#F8F8FF",
      }
    }
  }
}

Related searches

ethereal blue palettesoft sky colorscalm web designlight pastel bluesminimalist ui colors

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#ADD8E6
·
Color 3#B0E0E6
·
Color 4#F0F8FF
·
Color 5#F8F8FF
·

Accessibility

Contrast checker

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

Similar palettes

More like Pastel Cloud Dream

View all pastel
Cloud Puff Dream
Cloud Shimmer Dawn
Cloud Whisper Bloom
Dreamy Sky Puff
Ethereal Cloud Dream
Pastel Cloud Canvas