Back to palettes

Palette

Dreamy Cloudscape Pastels

A soft and ethereal palette inspired by the tranquil, evolving hues of a dreamy pastel sky at dusk.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7F7FF#E0E5FF#C4D0FF#A9BBFF#8DA6FF

Palette guide

How to use Dreamy Cloudscape Pastels

Overview

The Dreamy Cloudscape Pastels palette, featuring a beautiful progression of soft blues from #F7F7FF to #8DA6FF, mirrors the tranquil hues of a twilight sky. This ethereal collection is perfect for designers and developers seeking to create calm, sophisticated, and visually engaging digital experiences. The subtle shifts in lightness and saturation, exemplified by #E0E5FF and #C4D0FF, allow for elegant gradients and depth without harsh contrasts. These hex codes are ideal for branding, web design, or digital art where a serene, dreamy atmosphere is paramount. Embrace this palette to infuse projects with a sense of peace and understated beauty.

Best used for

  • Luxury lifestyle and wellness brands
  • E-commerce sites for artisan goods
  • Digital art and illustration backgrounds
  • Wedding and event planning websites
  • Mindfulness and meditation apps
  • Soft, minimalist UI designs

Suggested color roles

primary

#A9BBFF (Medium Pastel Blue): A balanced primary color for main sections or prominent UI elements, offering gentle depth.

secondary

#C4D0FF (Light Pastel Blue): A versatile supporting shade for subheadings, secondary buttons, or accent panels.

accent

#8DA6FF (Deeper Pastel Blue): Provides a slightly richer accent, perfect for calls-to-action, interactive elements, or focal points.

background

#F7F7FF (Very Pale Blue): An airy, almost white base that provides a clean canvas and enhances readability.

text

A dark charcoal like #333333 or deep navy for optimal readability against these light pastel blues.

Accessibility notes

  • All colors are light; ensure text has strong contrast with a very dark color for readability.
  • Avoid using #F7F7FF or #E0E5FF for text, as they lack sufficient contrast against most backgrounds.
  • When designing, check contrast ratios carefully, especially for smaller text on any of the lighter blues.
  • Consider using a dark neutral like #333333 for all body text to ensure WCAG AA compliance.

Recommended combinations

Sky Gradient

Ideal for creating soft, atmospheric background gradients, hero sections, or large visual elements.

#F7F7FF · #E0E5FF · #C4D0FF

Layered Clouds

Perfect for establishing a subtle hierarchy in UI, with deeper blues for interactive elements and lighter for backgrounds.

#A9BBFF · #8DA6FF · #F7F7FF

Serene Harmony

Use #C4D0FF for headings, #F7F7FF as the background, and dark text for a harmonious and readable layout.

#C4D0FF · #F7F7FF · #A9BBFF

CSS variables

:root {
  --dreamy-cloudscape-pastels-1: #F7F7FF;
  --dreamy-cloudscape-pastels-2: #E0E5FF;
  --dreamy-cloudscape-pastels-3: #C4D0FF;
  --dreamy-cloudscape-pastels-4: #A9BBFF;
  --dreamy-cloudscape-pastels-5: #8DA6FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-cloudscape-pastels": {
        1: "#F7F7FF",
        2: "#E0E5FF",
        3: "#C4D0FF",
        4: "#A9BBFF",
        5: "#8DA6FF",
      }
    }
  }
}

Related searches

pastel blue cloud palettedreamy sky color schemesoft twilight bluescalm UI pastel paletteethereal blue branding

Palette colors

Hex values

Color 1#F7F7FF
·
Color 2#E0E5FF
·
Color 3#C4D0FF
·
Color 4#A9BBFF
·
Color 5#8DA6FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.8:1Fail
2.2:1Fail
2
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.9:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.8:1Fail
1.5:1Fail
1.2:1Fail
1.2:1Fail
5
2.2:1Fail
1.9:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Dreamy Cloudscape Pastels

View all pastel
Cloud Dream Whisper
Cloud Puff Dream
Dreamy Cloudscape Haze
Sky Bloom Veil
Azure Dream Canvas
Celestial Blush