Back to palettes

Palette

Cloud Whisper Haze

Soft, ethereal tones that capture the delicate and ever-shifting beauty of clouds at dawn.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F2F5#DDE3E7#C6CED3#AAB4BA#909CA3

Palette guide

How to use Cloud Whisper Haze

Overview

The Cloud Whisper Haze palette offers soft, ethereal tones that capture the delicate and ever-shifting beauty of clouds at dawn. Ranging from the subtle depth of #909CA3 to the pristine #F0F2F5, with seamless transitions through #AAB4BA, #C6CED3, and #DDE3E7, this collection embodies sophisticated minimalism. It's an excellent choice for designers and developers aiming for a clean, tranquil, and understated aesthetic. Leverage these serene hues to create modern websites, ethereal branding, or refined interfaces that convey calm and professionalism without overwhelming the user, fostering a sense of spaciousness and quiet contemplation.

Best used for

  • Minimalist web design
  • Luxury spa branding
  • Ethereal wedding photography
  • High-end interior design concepts
  • Meditation app interfaces
  • Clean corporate communications

Suggested color roles

primary

Use #909CA3 as the deepest, anchoring color for main headers, navigation, or strong brand elements. It provides a subtle yet stable foundation.

secondary

Employ #AAB4BA for supporting sections, subheadings, or secondary content. It offers a softer yet substantial cool grey-blue.

accent

Apply #C6CED3 for subtle highlights, interactive states, or decorative elements. Its lighter tone provides gentle contrast and refinement.

background

Utilize #F0F2F5 for clean, expansive backgrounds. This very light, almost white-blue creates an airy, serene canvas, promoting readability.

text

For body text on light backgrounds like #F0F2F5 or #DDE3E7, #909CA3 provides good readability. Consider a very dark charcoal (#333333) for maximum contrast if needed.

Accessibility notes

  • Ensure #909CA3 text on #F0F2F5 or #DDE3E7 backgrounds meets WCAG contrast standards. Other light blue-grey combinations will likely fail.
  • Avoid using #AAB4BA or #C6CED3 text on the lightest backgrounds, as contrast will be insufficient.
  • Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
  • For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Hazy Depth

Ideal for a sophisticated, calm theme. #909CA3 for primary, #AAB4BA for secondary, and #F0F2F5 for a serene background.

#909CA3 · #AAB4BA · #F0F2F5

Cloud Layers

Excellent for subtle gradients or layered UI elements, creating depth without harshness.

#C6CED3 · #DDE3E7 · #AAB4BA

Whisper Light

Perfect for a very light, spacious design. #AAB4BA for key text, with #DDE3E7 and #F0F2F5 for layered backgrounds.

#AAB4BA · #DDE3E7 · #F0F2F5

CSS variables

:root {
  --cloud-whisper-haze-1: #F0F2F5;
  --cloud-whisper-haze-2: #DDE3E7;
  --cloud-whisper-haze-3: #C6CED3;
  --cloud-whisper-haze-4: #AAB4BA;
  --cloud-whisper-haze-5: #909CA3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-whisper-haze": {
        1: "#F0F2F5",
        2: "#DDE3E7",
        3: "#C6CED3",
        4: "#AAB4BA",
        5: "#909CA3",
      }
    }
  }
}

Related searches

neutral blue grey paletteethereal cloud color schemecalm minimalist UI colorsairy grey brandingserene dawn web design

Palette colors

Hex values

Color 1#F0F2F5
·
Color 2#DDE3E7
·
Color 3#C6CED3
·
Color 4#AAB4BA
·
Color 5#909CA3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.9:1Fail
2.5:1Fail
2
1.2:1Fail
1.2:1Fail
1.6:1Fail
2.2:1Fail
3
1.4:1Fail
1.2:1Fail
1.3:1Fail
1.8:1Fail
4
1.9:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.5:1Fail
2.2:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Cloud Whisper Haze

View all neutral
Cloud Cotton Dream
Cloud Veil Serene
Soft Linen Whisper
Whispering Rice Paper
Ancient Relic Dust
Bleached Wood Grain