Back to palettes

Palette

Dreamy Cloudscape

Wisps of pale blues and soft pinks create a serene atmosphere, like floating through a tranquil sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#87CEEB#ADD8E6#E0FFFF#F0F8FF#FFF0F5

Palette guide

How to use Dreamy Cloudscape

Overview

The Dreamy Cloudscape palette, featuring wisps of pale blues like #87CEEB, #ADD8E6, and #E0FFFF, alongside the soft pink of #FFF0F5, creates a serene and tranquil atmosphere. This collection is perfect for designers and developers aiming to evoke a sense of calm, lightness, and ethereal beauty in their projects. The gentle interplay of cool blues and a delicate pink allows for balanced, harmonious designs that feel expansive and comforting. With #F0F8FF providing a near-white base, these hex codes are ideal for backgrounds, subtle UI elements, and soothing visual content, ensuring readability with dark text and a cohesive aesthetic.

Best used for

  • Baby and children's product brands
  • Wellness and relaxation apps
  • Ethereal photography and art portfolios
  • Wedding and romantic event invitations
  • Soft, minimalist UI designs
  • Dream-themed digital illustrations

Suggested color roles

primary

#87CEEB (Sky Blue): A refreshing primary color for main sections or prominent UI elements, establishing a calm tone.

secondary

#ADD8E6 (Light Blue): A softer, versatile blue for subheadings, secondary buttons, or supporting graphical elements.

accent

#FFF0F5 (Lavender Blush): Provides a delicate, warm accent, perfect for subtle highlights, hover states, or feminine touches.

background

#F0F8FF (Alice Blue): A very light, almost white background that provides an airy canvas for content.

text

A dark charcoal like #333333 or pure black for optimal readability against these light, pastel tones.

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 #F0F8FF or #FFF0F5 for text, as they lack sufficient contrast against most backgrounds.
  • When pairing #87CEEB with #ADD8E6, ensure there's enough difference for visual distinction.
  • Always check WCAG 2.1 AA contrast ratios for text and interactive elements.

Recommended combinations

Sky & Blush

Ideal for creating soft, atmospheric gradients or visual elements that blend cool blues with a touch of warmth.

#87CEEB · #E0FFFF · #FFF0F5

Cloud Layers

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

#ADD8E6 · #F0F8FF · #FFF0F5

Gentle UI

Use #87CEEB for main buttons, #F0F8FF as the primary background, and dark text for a clear, calming user interface.

#87CEEB · #F0F8FF · #E0FFFF

CSS variables

:root {
  --dreamy-cloudscape-1: #87CEEB;
  --dreamy-cloudscape-2: #ADD8E6;
  --dreamy-cloudscape-3: #E0FFFF;
  --dreamy-cloudscape-4: #F0F8FF;
  --dreamy-cloudscape-5: #FFF0F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-cloudscape": {
        1: "#87CEEB",
        2: "#ADD8E6",
        3: "#E0FFFF",
        4: "#F0F8FF",
        5: "#FFF0F5",
      }
    }
  }
}

Related searches

pastel blue pink palettecalm sky colorsdreamy soft UI designlight ethereal themebaby shower color scheme

Palette colors

Hex values

Color 1#87CEEB
·
Color 2#ADD8E6
·
Color 3#E0FFFF
·
Color 4#F0F8FF
·
Color 5#FFF0F5
·

Accessibility

Contrast checker

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

Similar palettes

More like Dreamy Cloudscape

View all pastel