Back to palettes

Palette

Cloud Dream Whisper

Soft, ethereal blues and grays, like whispered dreams carried on fluffy clouds across a gentle sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3E0E2#C4DDE7#B4D6ED#A5CDEC#E4EEF0

Palette guide

How to use Cloud Dream Whisper

Overview

The Cloud Dream Whisper palette embodies tranquility with its soft, ethereal blues and muted grey-greens. Shades like #D3E0E2 and #E4EEF0 offer a gentle, almost atmospheric background, while #C4DDE7 and #B4D6ED introduce a soothing sky-like quality. The deepest blue, #A5CDEC, provides a touch of grounding without disrupting the palette's overall calm. This collection is ideal for designers and developers seeking to create serene digital experiences, whether for wellness applications, peaceful branding, or contemplative content. Its harmonious blend ensures a consistent, gentle aesthetic across various UI elements and visual assets.

Best used for

  • Wellness and meditation apps or websites
  • Spa or relaxation service branding
  • Nature-inspired digital art and illustrations
  • Baby products and nursery decor
  • E-commerce for artisanal or handmade goods
  • Soft, inviting editorial layouts

Suggested color roles

primary

Use #C4DDE7 as a calming base for main content areas or hero images, fostering a sense of peace.

secondary

Apply #B4D6ED for secondary sections, navigation, or interactive elements, offering a gentle visual progression.

accent

Highlight key calls-to-action or important information with #A5CDEC, providing the strongest visual cue within the palette.

background

Utilize #E4EEF0 for expansive, light backgrounds, creating an airy and unobtrusive canvas.

text

A dark charcoal or deep navy (e.g., #333333 or #1A2A3A) is recommended for body text for optimal readability on these light shades.

Accessibility notes

  • Ensure sufficient contrast when using #A5CDEC for text against lighter backgrounds like #E4EEF0.
  • Avoid using the lighter shades like #D3E0E2 and #E4EEF0 for text, as their contrast with white or light grey is insufficient.
  • Consider larger font sizes or bolding for important text elements if using mid-range blues like #B4D6ED for contrast.
  • When layering, ensure there's enough perceived difference between adjacent shades to define boundaries clearly.

Recommended combinations

Serene UI

Creates a gentle, clean interface for wellness or lifestyle applications.

#E4EEF0 · #C4DDE7 · #A5CDEC

Dreamy Gradient

Forms a soft, flowing background or header effect.

#D3E0E2 · #B4D6ED · #C4DDE7

Calm Accents

Highlights important information subtly against a very light background.

#E4EEF0 · #A5CDEC · #D3E0E2

CSS variables

:root {
  --cloud-dream-whisper-1: #D3E0E2;
  --cloud-dream-whisper-2: #C4DDE7;
  --cloud-dream-whisper-3: #B4D6ED;
  --cloud-dream-whisper-4: #A5CDEC;
  --cloud-dream-whisper-5: #E4EEF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-dream-whisper": {
        1: "#D3E0E2",
        2: "#C4DDE7",
        3: "#B4D6ED",
        4: "#A5CDEC",
        5: "#E4EEF0",
      }
    }
  }
}

Related searches

soft blue grey palettecalm dreamy colorsethereal sky blue schemepeaceful UI design colorsmuted pastel blue palette

Palette colors

Hex values

Color 1#D3E0E2
·
Color 2#C4DDE7
·
Color 3#B4D6ED
·
Color 4#A5CDEC
·
Color 5#E4EEF0
·

Accessibility

Contrast checker

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

Similar palettes

More like Cloud Dream Whisper

View all pastel
Dreamy Cloudscape Pastels
Dreamy Cotton
Dreamy Sky Puff
Pastel Cloud Serene
Sky Bloom Veil
Sugar Sky Horizon