Back to palettes

Palette

Dusky Meadow Mist

Soft, graduated grays capturing the elusive beauty of a misty, quiet meadow at dawn.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#C0C0C0#D3D3D3#E8E8E8#989898

Palette guide

How to use Dusky Meadow Mist

Overview

The Dusky Meadow Mist palette features a collection of soft, graduated grays, embodying the tranquil and elusive beauty of a misty meadow at dawn. With hues like #A9A9A9, #C0C0C0, and the subtle depth of #989898, this monochrome scheme is ideal for creating serene and sophisticated visual experiences. Designers and developers can leverage these tones to build minimalist interfaces, establish calm brand identities, or provide a neutral backdrop that allows other elements to subtly shine. The lightest shade, #E8E8E8, offers a clean, airy foundation.

Best used for

  • Minimalist UI/UX design
  • Subtle brand identity
  • Fine art photography backgrounds
  • Architectural renderings
  • Serene interior design concepts
  • Elegant editorial layouts

Suggested color roles

primary

#A9A9A9 serves as a versatile mid-tone anchor, perfect for main content areas or structural elements.

secondary

#C0C0C0 offers a slightly lighter contrast, suitable for secondary information, dividers, or subtle highlights.

accent

#989898, being the deepest gray, provides a subtle accent for interactive states, icons, or to introduce a touch more depth.

background

#E8E8E8 is the ideal choice for a clean, light background, creating an open and airy feel.

text

For optimal readability on light backgrounds, use #989898. For critical text on #E8E8E8, a dark charcoal or black is recommended.

Accessibility notes

  • Ensure sufficient contrast for text on lighter backgrounds like #E8E8E8; #989898 is a good choice for body text.
  • Avoid using very similar shades like #C0C0C0 and #D3D3D3 adjacent for key information to prevent visual ambiguity.
  • For interactive elements, ensure distinct hover and active states with adequate contrast from their surroundings.
  • Consider pairing critical headings or calls-to-action with a darker shade outside the palette, such as pure black, on #E8E8E8 for maximum legibility.

Recommended combinations

Soft Gradient

Creates smooth, ethereal background transitions for banners or hero sections.

#E8E8E8 · #D3D3D3 · #C0C0C0

Layered Depth

Establishes visual hierarchy with a deep base, a mid-tone, and a light highlight for card components or panels.

#A9A9A9 · #989898 · #E8E8E8

Subtle Contrast

Provides balanced contrast for structural elements like navigation bars or footers.

#C0C0C0 · #A9A9A9 · #E8E8E8

CSS variables

:root {
  --dusky-meadow-mist-1: #A9A9A9;
  --dusky-meadow-mist-2: #C0C0C0;
  --dusky-meadow-mist-3: #D3D3D3;
  --dusky-meadow-mist-4: #E8E8E8;
  --dusky-meadow-mist-5: #989898;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusky-meadow-mist": {
        1: "#A9A9A9",
        2: "#C0C0C0",
        3: "#D3D3D3",
        4: "#E8E8E8",
        5: "#989898",
      }
    }
  }
}

Related searches

gray color schemeneutral UI palettesubtle design colorscalm gray tonesminimalist aesthetic palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#C0C0C0
·
Color 3#D3D3D3
·
Color 4#E8E8E8
·
Color 5#989898
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
1.9:1Fail
1.2:1Fail
2
1.3:1Fail
1.2:1Fail
1.5:1Fail
1.6:1Fail
3
1.6:1Fail
1.2:1Fail
1.2:1Fail
1.9:1Fail
4
1.9:1Fail
1.5:1Fail
1.2:1Fail
2.4:1Fail
5
1.2:1Fail
1.6:1Fail
1.9:1Fail
2.4:1Fail

Similar palettes

More like Dusky Meadow Mist

View all monochrome
Lunar Moth Serene
Misty Horizon Calm
Misty Moorland Walk
Morning Fog
Silent Fog Horizon
Soft Greige Cloud