Back to palettes

Palette

Muted Haze Comfort

A gentle and comforting array of soft greys, creating a serene and understated ambiance.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Muted Haze Comfort 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 Muted Haze Comfort.

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

Data visualization

#8D949B#A9A9A9#B8BCC0#D3D7DC#F0F0F0

Palette guide

How to use Muted Haze Comfort

Overview

The Muted Haze Comfort palette offers a gentle and comforting array of soft greys, creating a serene and understated ambiance. Ranging from a medium grey (#8D949B) to a nearly-white (#F0F0F0), with versatile mid-tones like #A9A9A9 and #D3D7DC, this collection provides a sophisticated monochromatic feel. It's an excellent choice for designers and developers aiming to create minimalist, clean, and modern experiences that emphasize clarity and tranquility across digital interfaces, corporate branding, or elegant print materials.

Best used for

  • Minimalist web and app interfaces
  • Corporate and professional branding
  • Modern interior design concepts
  • Luxury packaging and product design
  • Clean editorial layouts
  • Tech and software applications

Suggested color roles

primary

Use #8D949B (medium grey) for primary headings or key UI components, providing a stable, modern feel.

secondary

Employ #A9A9A9 (slightly warmer grey) for subheadings, navigation, or to add subtle differentiation.

accent

Incorporate #B8BCC0 (light-mid grey) for subtle highlights, interactive states, or background patterns.

background

Select #F0F0F0 (near-white) as a crisp, clean backdrop that enhances readability and a spacious feel.

text

Opt for #8D949B (medium grey) for body text, offering soft readability and a contemporary aesthetic against lighter backgrounds.

Accessibility notes

  • Crucially ensure text contrast, especially for lighter greys like #B8BCC0 or #D3D7DC on #F0F0F0.
  • The lightest background #F0F0F0 requires a darker text color such as #8D949B or black for optimal readability.
  • Avoid using adjacent light greys (e.g., #D3D7DC on #B8BCC0) for small text due to potential contrast issues.
  • The darkest color, #8D949B, provides reliable contrast for text against all lighter shades in this palette.

Recommended combinations

Clean Contrast

Ideal for main body text on a clean background, ensuring maximum readability and a minimalist look.

#F0F0F0 · #8D949B · #A9A9A9

Subtle Depth

Creates layered grey effects for complex dashboards, data visualizations, or subtle UI components.

#D3D7DC · #B8BCC0 · #A9A9A9

Modern Base

A versatile pairing for headers and sub-sections, offering clear hierarchy with a contemporary feel.

#A9A9A9 · #8D949B · #B8BCC0

CSS variables

:root {
  --muted-haze-comfort-1: #8D949B;
  --muted-haze-comfort-2: #A9A9A9;
  --muted-haze-comfort-3: #B8BCC0;
  --muted-haze-comfort-4: #D3D7DC;
  --muted-haze-comfort-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-haze-comfort": {
        1: "#8D949B",
        2: "#A9A9A9",
        3: "#B8BCC0",
        4: "#D3D7DC",
        5: "#F0F0F0",
      }
    }
  }
}

Related searches

muted grey paletteminimalist color schemeserene grey tonescomfort colors designsubtle haze hues

Palette colors

Hex values

Color 1#8D949B
·
Color 2#A9A9A9
·
Color 3#B8BCC0
·
Color 4#D3D7DC
·
Color 5#F0F0F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.1:1Fail
2.7:1Fail
2
1.3:1Fail
1.2:1Fail
1.6:1Fail
2.1:1Fail
3
1.6:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
4
2.1:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.7:1Fail
2.1:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Muted Haze Comfort

View all neutral
Calm Interior Lines
Calm Stone Pathway
Charcoal Smolder
Cloud Soft Canvas
Cloudy Cobblestone Lane
Concrete Bloom Resilient