Back to palettes

Palette

Gentle Cloud Whisper

Soft, airy grays and subtle blues, like delicate clouds drifting silently across the sky.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EFEFF5#D8D9E0#BCBED0#9FA2B3#828697

Palette guide

How to use Gentle Cloud Whisper

Overview

The "Gentle Cloud Whisper" palette offers a sophisticated and calming range of soft grays and subtle blues, mirroring the serene movement of clouds across the sky. Beginning with the ethereal #EFEFF5, it gradually deepens through #D8D9E0, #BCBED0, #9FA2B3, and culminates in the grounded #828697. Designers can utilize this versatile neutral palette to create clean, modern, and minimalist interfaces or branding that exudes professionalism and tranquility. Developers will find these hues ideal for crafting elegant dark mode themes, sophisticated data dashboards, or any application requiring a refined, understated aesthetic with excellent visual hierarchy.

Best used for

  • Corporate and professional websites
  • Minimalist app design
  • Data dashboards and analytics platforms
  • Modern editorial layouts
  • Tech product interfaces
  • Architecture and interior design portfolios

Suggested color roles

primary

#EFEFF5 - A very light, almost off-white gray, serving as an excellent clean background for main content.

secondary

#D8D9E0 - A slightly darker, subtle gray, ideal for card backgrounds, subtle borders, or secondary information panels.

accent

#9FA2B3 - A mid-tone gray-blue, perfect for interactive elements, highlights, or subtle calls-to-action, adding depth.

background

#EFEFF5 - The primary canvas, offering a clean, spacious, and neutral foundation.

text

#828697 - A dark, legible gray-blue, excellent for body text on lighter backgrounds like #EFEFF5, providing soft readability.

Accessibility notes

  • #828697 provides good contrast for text on #EFEFF5 and #D8D9E0.
  • Ensure sufficient contrast when using #9FA2B3 for text on #EFEFF5 for critical information.
  • Avoid using #D8D9E0 or #BCBED0 for small text on #EFEFF5.
  • For interactive elements, ensure clear focus states, as color differences can be subtle.

Recommended combinations

Cloud Layers

Create sophisticated layered UI elements like cards, modals, or subtle background patterns.

#EFEFF5 · #D8D9E0 · #BCBED0

Deep Contrast

Ideal for main content areas with clear, readable text and a subtle, professional accent.

#EFEFF5 · #828697 · #9FA2B3

Gradient Flow

Use for subtle gradients in navigation bars or footers to add depth and visual interest.

#BCBED0 · #9FA2B3 · #828697

CSS variables

:root {
  --gentle-cloud-whisper-1: #EFEFF5;
  --gentle-cloud-whisper-2: #D8D9E0;
  --gentle-cloud-whisper-3: #BCBED0;
  --gentle-cloud-whisper-4: #9FA2B3;
  --gentle-cloud-whisper-5: #828697;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-cloud-whisper": {
        1: "#EFEFF5",
        2: "#D8D9E0",
        3: "#BCBED0",
        4: "#9FA2B3",
        5: "#828697",
      }
    }
  }
}

Related searches

gentle gray color paletteneutral blue-gray web designcalm minimalist UI colorssoft cloud aesthetic paletteprofessional subtle gray scheme

Palette colors

Hex values

Color 1#EFEFF5
·
Color 2#D8D9E0
·
Color 3#BCBED0
·
Color 4#9FA2B3
·
Color 5#828697
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.2:1Fail
3.2:1AA18
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
2.6:1Fail
3
1.6:1Fail
1.3:1Fail
1.4:1Fail
2:1Fail
4
2.2:1Fail
1.8:1Fail
1.4:1Fail
1.4:1Fail
5
3.2:1AA18
2.6:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Gentle Cloud Whisper

View all neutral