Back to palettes

Palette

Whispering Wind Chime

Delicate, airy blues and whites that evoke the gentle, calming tinkling sounds of wind chimes on a breezy day.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Wind Chime 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 Wind Chime.

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

Data visualization

#B0C4DE#D4E6EC#EBF4F7#F0F8FF#A9BCCC

Palette guide

How to use Whispering Wind Chime

Overview

The "Whispering Wind Chime" palette (version 2) is a delicate and airy collection of cool blues and near-whites, designed to evoke a sense of calm and lightness. Featuring the gentle steel blue #B0C4DE, the soft sky tone #D4E6EC, and the crisp #EBF4F7, this palette culminates in the pure, ethereal #F0F8FF. The inclusion of the slightly deeper #A9BCCC provides a subtle grounding element without compromising the overall airy feel. This palette is perfect for designers aiming to create serene, clean, and refreshing interfaces or visual identities that convey peace and clarity.

Best used for

  • Healthcare or wellness platforms
  • Cloud computing interfaces
  • Baby and children's product design
  • Minimalist wedding stationery
  • Spa and relaxation app interfaces
  • Airy interior design concepts

Suggested color roles

primary

#B0C4DE can be used for soft headers, navigation bars, or important sections requiring a gentle yet stable presence.

secondary

#A9BCCC offers a slightly darker blue, suitable for secondary titles, subtle borders, or interactive elements.

accent

#D4E6EC works well for subtle highlights, background elements, or as a lighter alternative for calls-to-action.

background

#F0F8FF provides an immaculate, almost white canvas, ensuring maximum readability and an open, clean feel.

text

A dark grey or black is recommended for body text on #F0F8FF. For contrast on #B0C4DE, #F0F8FF works well.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter blues like #D4E6EC or #EBF4F7 with text on #F0F8FF.
  • For critical text, use a strong contrast, such as dark charcoal, on the lightest background colors.
  • Interactive elements should have clear focus states that are distinguishable from normal states.
  • Avoid low-contrast pairings like #EBF4F7 text on #D4E6EC backgrounds for important information.

Recommended combinations

Sky Serenity

Creates a light, ethereal feel, perfect for calming websites or subtle branding.

#B0C4DE · #D4E6EC · #F0F8FF

Chime Echo

Provides a gentle depth with a slightly darker blue, suitable for structured, clean layouts.

#A9BCCC · #B0C4DE · #EBF4F7

Breezy Calm

An almost monochromatic blend for ultra-light backgrounds or subtle gradient effects.

#D4E6EC · #EBF4F7 · #F0F8FF

CSS variables

:root {
  --whispering-wind-chime-2-1: #B0C4DE;
  --whispering-wind-chime-2-2: #D4E6EC;
  --whispering-wind-chime-2-3: #EBF4F7;
  --whispering-wind-chime-2-4: #F0F8FF;
  --whispering-wind-chime-2-5: #A9BCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-wind-chime-2": {
        1: "#B0C4DE",
        2: "#D4E6EC",
        3: "#EBF4F7",
        4: "#F0F8FF",
        5: "#A9BCCC",
      }
    }
  }
}

Related searches

light blue white paletteairy cool colorsserene web design colorscalm minimalist palettetranquil blue branding

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#D4E6EC
·
Color 3#EBF4F7
·
Color 4#F0F8FF
·
Color 5#A9BCCC
·

Accessibility

Contrast checker

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

Similar palettes

More like Whispering Wind Chime

View all cool