Back to palettes

Palette

Whispering Cloud Veil

A light and airy palette, like soft clouds drifting across a pale, endless sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Cloud Veil 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 Cloud Veil.

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

Data visualization

#F5F5F5#D3D3D3#ADD8E6#B0E0E6#E0FFFF

Palette guide

How to use Whispering Cloud Veil

Overview

The Whispering Cloud Veil palette is a light and airy collection, like soft clouds drifting across a pale, endless sky. Comprising serene hues from the pure #F5F5F5 to the gentle #B0E0E6, this pastel palette offers designers and developers a tranquil and minimalist foundation. The soft gray #D3D3D3 provides subtle depth, while the ethereal #ADD8E6 and #E0FFFF introduce a delicate touch of cool blue. This palette is perfect for creating clean, expansive, and calming visual experiences across various platforms.

Best used for

  • Minimalist website and app design
  • Clean, modern branding
  • Healthcare and wellness interfaces
  • Spa and relaxation center branding
  • Ethereal photography backdrops
  • High-tech and clean aesthetic products

Suggested color roles

primary

#F5F5F5 acts as the purest white, offering an airy, expansive base for backgrounds and layouts.

secondary

#D3D3D3 provides a soft gray, ideal for subtle support, UI dividers, or secondary content blocks.

accent

#ADD8E6 offers a light, gentle blue, perfect for subtle highlights, icons, or soft call-to-action elements.

background

#F5F5F5 creates a clean, expansive canvas that evokes a sense of openness and calm.

text

A dark gray or charcoal (e.g., #333333) is recommended for text to ensure readability against these light tones.

Accessibility notes

  • Always use a dark gray or charcoal for text on these light colors to ensure sufficient contrast for readability.
  • Avoid using #D3D3D3 or the light blues (#ADD8E6, #B0E0E6, #E0FFFF) for small text elements due to low contrast.
  • Ensure interactive elements have clear visual states and sufficient contrast, possibly using a darker border or shadow.
  • Larger font sizes may improve readability for text set in #D3D3D3 against #F5F5F5.

Recommended combinations

Sky Mist

For a light, airy, and harmonious design, suitable for hero sections, main content areas, or tranquil backgrounds.

#F5F5F5 · #D3D3D3 · #ADD8E6

Blue Haze

To create subtle blue gradients and a sense of depth, ideal for headers, banners, or decorative elements.

#ADD8E6 · #B0E0E6 · #E0FFFF

Clean Horizon

For balanced sections where both lightness and subtle color are desired, such as content cards or feature blocks.

#F5F5F5 · #B0E0E6 · #D3D3D3

CSS variables

:root {
  --whispering-cloud-veil-1: #F5F5F5;
  --whispering-cloud-veil-2: #D3D3D3;
  --whispering-cloud-veil-3: #ADD8E6;
  --whispering-cloud-veil-4: #B0E0E6;
  --whispering-cloud-veil-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-cloud-veil": {
        1: "#F5F5F5",
        2: "#D3D3D3",
        3: "#ADD8E6",
        4: "#B0E0E6",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

light blue white paletteairy cloud colorsminimalist calm schemeserene pastel blueclean web design colors

Palette colors

Hex values

Color 1#F5F5F5
·
Color 2#D3D3D3
·
Color 3#ADD8E6
·
Color 4#B0E0E6
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

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

Similar palettes

More like Whispering Cloud Veil

View all pastel
Azure Dream Canvas
Cloud Berry Skies
Ethereal Celestial Cloud
Ethereal Cloud Veil
Soft Cloud Touch
Chiffon Veil