Palette

Whispering Sky Drift

Delicately soft blues and whites, capturing the gentle, floating serenity of clouds in an endless sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Sky Drift 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 Whispering Sky Drift.

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

Data visualization

#EBF4F5#D2E7ED#BCE1ED#A7D0EB#94BCE4

Palette guide

How to use Whispering Sky Drift

Overview

The Whispering Sky Drift palette offers a delicate spectrum of soft blues and near-whites, capturing the gentle, floating serenity of clouds in an endless sky. Ranging from the airy #EBF4F5 to the deeper #94BCE4, with calming mid-tones like #BCE1ED, this collection is perfect for designs that aim to evoke peace, lightness, and an ethereal quality. It provides a fresh and expansive visual experience, ideal for conveying calm and tranquility. Designers can leverage these gentle hues to craft serene digital interfaces, dreamlike branding, or content that inspires a sense of openness and quiet contemplation, ensuring a soothing aesthetic.

Best used for

Cloud-themed web designs
Wellness and meditation apps
Baby product branding
Ethereal art and photography
Clean UI/UX interfaces
Travel agencies promoting serene destinations

Suggested color roles

primary

Use #D2E7ED as a dominant background or content area color to establish a soft, calming, and expansive feel.

secondary

Apply #BCE1ED for secondary navigation, subtle graphic elements, or to create gentle visual separation.

accent

Employ #94BCE4 for impactful accents, buttons, or important calls to action, providing a touch of refreshing depth.

background

The lightest shade, #EBF4F5, is perfect for a clean, airy background, allowing other elements to softly float.

text

A dark blue (e.g., #2E4057) or charcoal would provide optimal readability against the lighter palette colors while maintaining the calm aesthetic.

Accessibility notes

Crucially, use dark text for all body copy and headings, especially on #EBF4F5, #D2E7ED, and #BCE1ED, to ensure readability.
The darker #94BCE4 can be used for text on #EBF4F5, but always verify contrast ratios.
Avoid using two light colors from this palette together for text and background, as contrast will be insufficient.
Ensure interactive elements have clear visual states, perhaps with a slightly darker border or shadow for focus/hover.

Recommended combinations

Sky Base

Creates a light, layered background for web pages or print, evoking a clear, serene sky.

#EBF4F5 · #D2E7ED · #BCE1ED

Cloud Depth

Ideal for headings, feature sections, or branding elements that require a gentle yet distinct presence.

#D2E7ED · #A7D0EB · #94BCE4

Soft Contrast

Excellent for high-contrast text or illustrations on a light background, balancing softness with clarity.

#EBF4F5 · #94BCE4 · #BCE1ED

CSS variables

:root {
  --whispering-sky-drift-1: #EBF4F5;
  --whispering-sky-drift-2: #D2E7ED;
  --whispering-sky-drift-3: #BCE1ED;
  --whispering-sky-drift-4: #A7D0EB;
  --whispering-sky-drift-5: #94BCE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-sky-drift": {
        1: "#EBF4F5",
        2: "#D2E7ED",
        3: "#BCE1ED",
        4: "#A7D0EB",
        5: "#94BCE4",
      }
    }
  }
}

Hex values

Color 1#EBF4F5

Color 2#D2E7ED

Color 3#BCE1ED

Color 4#A7D0EB

Color 5#94BCE4

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.8:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

Similar palettes

More like Whispering Sky Drift

Whispering Sky Drift

See it in context.

Ready when you are.

Built with Whispering Sky Drift.

How to use Whispering Sky Drift

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Base

Cloud Depth

Soft Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Whispering Sky Drift