Palette

Monochromatic Mist

A sophisticated progression of muted tones, capturing the subtlety of a foggy landscape.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochromatic Mist 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 Monochromatic Mist.

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

Data visualization

#F0F0F0#BDBDBD#808080#4A4A4A#1F1F1F

Palette guide

How to use Monochromatic Mist

Overview

The Monochromatic Mist palette offers a sophisticated progression of muted grays, capturing the subtle beauty of a foggy landscape. Ranging from a very light #F0F0F0 to a deep #1F1F1F, with balanced intermediate tones like #BDBDBD, #808080, and #4A4A4A. This palette is perfect for designs that seek a calm, understated, and refined aesthetic. Designers can leverage these shades to create soft depth, clear hierarchy, and a sense of serene professionalism across digital interfaces, print media, or branding projects. Developers will find this palette excellent for establishing a consistent and harmonious visual language with ease.

Best used for

Wellness and mindfulness apps
High-end spa or hospitality branding
Minimalist photography websites
Modern art gallery presentations
Editorial layouts with a calming mood
Sustainable or eco-conscious product sites

Suggested color roles

primary

#1F1F1F, a deep charcoal, serves as a strong, grounding anchor for main headings, navigation, or critical calls to action, ensuring clarity.

secondary

#4A4A4A is excellent for subheadings, borders, or slightly darker background panels, offering a gentle yet clear contrast.

accent

#808080 can be used for secondary text, icons, or subtle interactive elements, maintaining the sophisticated muted aesthetic.

background

#F0F0F0 or #BDBDBD provides a clean, airy backdrop, ideal for main content areas to maximize readability for darker text.

text

#1F1F1F or #4A4A4A on lighter backgrounds like #F0F0F0 or white ensures optimal legibility for body text.

Accessibility notes

Ensure sufficient contrast when using #BDBDBD text on #F0F0F0 for small text; it may not meet WCAG AA standards.
Always use a dark gray like #1F1F1F for primary text on light backgrounds to ensure maximum readability.
Interactive elements should have clear visual cues (e.g., a darker hover state) to indicate their functionality.
Avoid using #F0F0F0 text on #BDBDBD for any essential information due to low contrast.

Recommended combinations

Serene Horizon

Ideal for headers and main content, with #F0F0F0 as background, #1F1F1F for titles, and #4A4A4A for supporting details.

#1F1F1F · #F0F0F0 · #4A4A4A

Foggy Layers

Creates a harmonious, layered look for UI components or content blocks, offering subtle depth and a calm feel.

#4A4A4A · #808080 · #BDBDBD

Muted Elegance

Excellent for minimalist web pages, using #F0F0F0 as the dominant background, #1F1F1F for primary text, and #808080 for subtle accents.

#F0F0F0 · #1F1F1F · #808080

CSS variables

:root {
  --monochromatic-mist-1: #F0F0F0;
  --monochromatic-mist-2: #BDBDBD;
  --monochromatic-mist-3: #808080;
  --monochromatic-mist-4: #4A4A4A;
  --monochromatic-mist-5: #1F1F1F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochromatic-mist": {
        1: "#F0F0F0",
        2: "#BDBDBD",
        3: "#808080",
        4: "#4A4A4A",
        5: "#1F1F1F",
      }
    }
  }
}

Hex values

Color 1#F0F0F0

Color 2#BDBDBD

Color 3#808080

Color 4#4A4A4A

Color 5#1F1F1F

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

7.8:1AAA

14.5:1AAA

1.6:1Fail

2.1:1Fail

4.7:1AA

8.8:1AAA

3.5:1AA18

2.1:1Fail

2.2:1Fail

4.2:1AA18

7.8:1AAA

4.7:1AA

2.2:1Fail

1.9:1Fail

14.5:1AAA

8.8:1AAA

4.2:1AA18

1.9:1Fail

Similar palettes

More like Monochromatic Mist

View all monochrome

Cloud Grey Mirage

Ghostly Fog Hues

Monochromatic Foggy City

Monochrome Dawn Haze

Pale Stone Serenity

Whispering Mist