Back to palettes

Palette

Cloud Puff Dream

Weightless and airy, like gazing up at a sky full of fluffy, whimsical cloud formations.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8F8FF#E0FFFF#ADD8E6#B0E0E6#87CEEB

Palette guide

How to use Cloud Puff Dream

Overview

The Cloud Puff Dream palette is weightless and airy, like gazing up at a sky full of fluffy, whimsical cloud formations. With serene blues like #87CEEB and #ADD8E6, complemented by the ethereal #E0FFFF, #B0E0E6, and #F8F8FF, this collection is perfect for evoking calm and a sense of wonder. Designers and developers can leverage these soft pastels to create enchanting digital experiences, dreamy branding, or tranquil physical spaces. The palette's gentle yet refreshing nature is ideal for projects seeking a light, imaginative, and subtly playful aesthetic, ensuring a captivating visual presence that feels both inviting and expansive.

Best used for

  • Children's product branding
  • Baby-related websites
  • Dreamy wedding themes
  • Relaxation app interfaces
  • Soft illustration work
  • Ethereal event invitations

Suggested color roles

primary

Use #87CEEB as the dominant, vibrant color for main headers, key calls-to-action, or strong brand elements. It provides a refreshing focal point.

secondary

Employ #ADD8E6 for supporting sections, subheadings, or secondary content. It offers a softer yet distinct blue presence.

accent

Apply #B0E0E6 for subtle highlights, interactive states, or decorative elements. Its lighter, cool tone provides gentle contrast.

background

Utilize #F8F8FF for clean, expansive backgrounds. This very light, almost white-blue creates an airy, dreamlike canvas.

text

For body text on light backgrounds like #F8F8FF, #87CEEB provides good readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

  • Ensure #87CEEB text on #F8F8FF or #E0FFFF backgrounds meets WCAG contrast standards. Other light blue-on-light blue combinations will likely fail.
  • Avoid using #ADD8E6 or #B0E0E6 text on the lightest backgrounds, as contrast will be insufficient.
  • Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
  • For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Dreamy Sky

Ideal for a vibrant yet soft brand. #87CEEB for primary, #ADD8E6 for secondary, and #F8F8FF for a dreamy background.

#87CEEB · #ADD8E6 · #F8F8FF

Puffy Haze

Excellent for subtle gradients or delicate illustrations, evoking softness and calm.

#E0FFFF · #B0E0E6 · #ADD8E6

Cloud Layers

Creates an airy, expansive feel. #ADD8E6 for grounding, #E0FFFF for main content, and #F8F8FF as a soft background.

#ADD8E6 · #E0FFFF · #F8F8FF

CSS variables

:root {
  --cloud-puff-dream-1: #F8F8FF;
  --cloud-puff-dream-2: #E0FFFF;
  --cloud-puff-dream-3: #ADD8E6;
  --cloud-puff-dream-4: #B0E0E6;
  --cloud-puff-dream-5: #87CEEB;
}

Tailwind config

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

Related searches

pastel blue color schemedreamy cloud palettesoft sky web designairy blue UI colorscalm pastel branding

Palette colors

Hex values

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

Accessibility

Contrast checker

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

Similar palettes

More like Cloud Puff Dream

View all pastel
Dreamy Cloudscape Haze
Dreamy Cloudscape Pastels
Pastel Cloud Dream
Sky Blossom Whispers
Azure Dream Canvas
Celestial Blush