Back to palettes

Palette

Whispering Air Mists

A delicate blend of muted greys, like faint whispers carried on a misty breeze.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Air Mists 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 Air Mists.

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

Data visualization

#E0E0E0#C2C2C2#A5A5A5#888888#6B6B6B

Palette guide

How to use Whispering Air Mists

Overview

The Whispering Air Mists palette is a delicate blend of muted greys, like faint whispers carried on a misty breeze. Ranging from the light #E0E0E0 to the deeper #6B6B6B, this neutral collection is perfect for creating soft, ethereal, and calm designs. It offers designers a versatile foundation for minimalist aesthetics, where subtle variations in tone create depth without strong contrasts. Ideal for projects that require a sophisticated, understated background or a gentle, modern feel, this palette supports readability while maintaining an airy, hazy mood across digital interfaces and print materials.

Best used for

  • Minimalist web design
  • High-end fashion photography backdrops
  • Serene interior decor concepts
  • Modern art gallery branding
  • User interface (UI) themes
  • Clean, professional corporate identity

Suggested color roles

primary

#A5A5A5 - A balanced mid-tone gray, suitable for main content areas, navigation, or subtle brand elements.

secondary

#888888 - A slightly darker gray for subheadings, borders, or secondary information, providing gentle contrast.

accent

#C2C2C2 - A lighter, versatile gray for highlights, hover states, or as a subtle background element.

background

#E0E0E0 - The lightest shade, perfect for clean, expansive backgrounds to create an open and airy feel.

text

#6B6B6B - The darkest hue, excellent for primary body text on lighter backgrounds like #E0E0E0 or #C2C2C2, ensuring readability.

Accessibility notes

  • Ensure sufficient contrast for text, particularly when pairing adjacent shades like #A5A5A5 and #888888.
  • Always use #6B6B6B for main body text on #E0E0E0 or #C2C2C2 backgrounds to meet WCAG AA standards.
  • Avoid using lighter grays for text on similar light backgrounds; contrast will be insufficient.
  • For interactive elements, ensure distinct visual cues (e.g., darker hover state) for accessibility.

Recommended combinations

Misty Backdrop

Creates a soft, layered background effect, ideal for serene interfaces or subtle brand presence.

#E0E0E0 · #C2C2C2 · #A5A5A5

Airy Depth

Provides gentle visual hierarchy and grounding, suitable for typography or functional elements.

#A5A5A5 · #888888 · #6B6B6B

Subtle Contrast

A clean combination for text and background, with a lighter accent for highlights or borders.

#E0E0E0 · #6B6B6B · #C2C2C2

CSS variables

:root {
  --whispering-air-mists-1: #E0E0E0;
  --whispering-air-mists-2: #C2C2C2;
  --whispering-air-mists-3: #A5A5A5;
  --whispering-air-mists-4: #888888;
  --whispering-air-mists-5: #6B6B6B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-air-mists": {
        1: "#E0E0E0",
        2: "#C2C2C2",
        3: "#A5A5A5",
        4: "#888888",
        5: "#6B6B6B",
      }
    }
  }
}

Related searches

soft grey color paletteethereal neutral tonescalm hazy colorsminimalist grey schemelight professional greys

Palette colors

Hex values

Color 1#E0E0E0
·
Color 2#C2C2C2
·
Color 3#A5A5A5
·
Color 4#888888
·
Color 5#6B6B6B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.7:1Fail
4:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
3:1Fail
3
1.9:1Fail
1.4:1Fail
1.4:1Fail
2.2:1Fail
4
2.7:1Fail
2:1Fail
1.4:1Fail
1.5:1Fail
5
4:1AA18
3:1Fail
2.2:1Fail
1.5:1Fail

Similar palettes

More like Whispering Air Mists

View all neutral