Back to palettes

Palette

Sky Whispers Gentle

Soft, ethereal blues and whites reflect the delicate beauty of a cloud-dappled morning sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sky Whispers Gentle 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 Sky Whispers Gentle.

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

Data visualization

#B0E0E6#ADD8E6#D3F0F4#E0FFFF#F0F8FF

Palette guide

How to use Sky Whispers Gentle

Overview

The "Sky Whispers Gentle" palette offers a refreshing collection of soft, ethereal blues and near-whites, perfectly capturing the delicate beauty of a cloud-dappled morning sky. With hues ranging from the serene #B0E0E6 and #ADD8E6 to the incredibly light #D3F0F4, #E0FFFF, and #F0F8FF, this palette radiates tranquility and airiness. It's an excellent choice for designers and developers aiming to evoke a sense of calm, purity, and expansiveness. These light, cool tones are ideal for creating clean, uncluttered interfaces, subtle branding, or any project that benefits from a fresh and gentle visual identity.

Best used for

  • Healthcare website design
  • Baby product packaging
  • Cloud storage application interfaces
  • Spa and wellness marketing materials
  • Serene blog themes
  • Environmental non-profit branding

Suggested color roles

primary

#B0E0E6 - A calming, light blue, ideal for main sections or primary branding elements to establish a fresh and trustworthy feel.

secondary

#ADD8E6 - A slightly more saturated light blue, perfect for supporting content areas, navigation, or subtle dividers.

accent

#D3F0F4 - A very light, almost icy blue, suitable for delicate highlights, hover states, or subtle background textures.

background

#F0F8FF - The lightest, almost pure white blue, providing an expansive and clean canvas for all content, optimizing readability for dark text.

text

Deep blue or charcoal, such as #2C3E50 or #333333 - Essential for achieving sufficient contrast against these extremely light background colors.

Accessibility notes

  • Critically important to use dark text (e.g., black, dark grey, or deep blue) against all palette colors to ensure readability.
  • The contrast between colors within the palette is generally very low; avoid using them for text/background pairings.
  • Use a reliable contrast checker to verify all text and interactive element color combinations.
  • Ensure focus indicators for interactive elements are clearly visible and distinct.

Recommended combinations

Morning Mist

Creates a soft, airy backdrop for hero sections or tranquil landing pages.

#B0E0E6 · #D3F0F4 · #F0F8FF

Gentle Flow

Ideal for subtle gradients or layered UI elements, suggesting fluidity and calm.

#ADD8E6 · #E0FFFF · #B0E0E6

Pure Serenity

Excellent for minimalist designs where a clean, expansive look is paramount, with dark text.

#F0F8FF · #D3F0F4 · #ADD8E6

CSS variables

:root {
  --sky-whispers-gentle-1: #B0E0E6;
  --sky-whispers-gentle-2: #ADD8E6;
  --sky-whispers-gentle-3: #D3F0F4;
  --sky-whispers-gentle-4: #E0FFFF;
  --sky-whispers-gentle-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sky-whispers-gentle": {
        1: "#B0E0E6",
        2: "#ADD8E6",
        3: "#D3F0F4",
        4: "#E0FFFF",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

light blue pastel paletteairy sky colorsgentle ui designserene branding huestranquil web aesthetic

Palette colors

Hex values

Color 1#B0E0E6
·
Color 2#ADD8E6
·
Color 3#D3F0F4
·
Color 4#E0FFFF
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

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

Similar palettes

More like Sky Whispers Gentle

View all pastel