Back to palettes

Palette

Monochrome Mist Shadow

A sophisticated gradient of cool greys, evoking a subtle, mysterious misty morning.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3B3C42#5D5E63#818389#A8AAAE#D0D2D7

Palette guide

How to use Monochrome Mist Shadow

Overview

The Monochrome Mist Shadow palette offers a sophisticated gradient of cool greys, evoking a subtle, mysterious misty morning. Ranging from the deep #3B3C42 to the airy #D0D2D7, with versatile mid-tones like #5D5E63, #818389, and #A8AAAE, this collection is perfect for creating designs with understated elegance and depth. Designers and developers will find these hues incredibly useful for crafting luxurious and atmospheric visual experiences. The cool undertones provide a contemporary feel, ideal for projects that require a refined and modern touch without being overtly stark.

Best used for

  • Luxury branding and packaging
  • Sophisticated web design
  • UI elements and iconography
  • Editorial layouts for high-end content
  • Atmospheric photography backdrops
  • Minimalist interior design concepts

Suggested color roles

primary

Utilize #5D5E63 as a balanced primary color for main content areas or interactive elements, offering cool stability.

secondary

Apply #818389 for supporting information, subheadings, or secondary UI components, providing a lighter complement.

accent

Employ #3B3C42 for subtle accents, borders, or hover states where a deeper, cool contrast is needed for emphasis.

background

Choose #D0D2D7 as a light, airy background color, creating a spacious and modern canvas for content.

text

Opt for #3B3C42 for body text on lighter backgrounds like #D0D2D7 to ensure excellent readability and a harmonious feel.

Accessibility notes

  • Ensure sufficient contrast between #3B3C42 text and #D0D2D7 backgrounds for WCAG AA compliance.
  • Avoid using #A8AAAE for small text on #D0D2D7 due to potential low contrast, especially for critical information.
  • Use a darker shade like #5D5E63 for focus indicators on interactive elements to ensure visibility.
  • Consider larger font sizes or bolding for text using lighter shades to improve legibility on light backgrounds.

Recommended combinations

Subtle Contrast

Creates a clean, readable layout with a light background, dark text, and a mid-tone for secondary elements.

#D0D2D7 · #3B3C42 · #818389

Cool Depth

Ideal for sections or cards requiring a sophisticated, layered look with deeper cool tones.

#A8AAAE · #5D5E63 · #3B3C42

Misty Gradient

Perfect for creating soft, atmospheric transitions in backgrounds, headers, or large visual blocks.

#D0D2D7 · #A8AAAE · #818389

CSS variables

:root {
  --monochrome-mist-shadow-1: #3B3C42;
  --monochrome-mist-shadow-2: #5D5E63;
  --monochrome-mist-shadow-3: #818389;
  --monochrome-mist-shadow-4: #A8AAAE;
  --monochrome-mist-shadow-5: #D0D2D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-mist-shadow": {
        1: "#3B3C42",
        2: "#5D5E63",
        3: "#818389",
        4: "#A8AAAE",
        5: "#D0D2D7",
      }
    }
  }
}

Related searches

cool grey palettesubtle monochromesophisticated grayscalemisty design colorsatmospheric UI

Palette colors

Hex values

Color 1#3B3C42
·
Color 2#5D5E63
·
Color 3#818389
·
Color 4#A8AAAE
·
Color 5#D0D2D7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
4.7:1AA
7.3:1AAA
2
1.7:1Fail
1.7:1Fail
2.8:1Fail
4.3:1AA18
3
2.9:1Fail
1.7:1Fail
1.6:1Fail
2.5:1Fail
4
4.7:1AA
2.8:1Fail
1.6:1Fail
1.5:1Fail
5
7.3:1AAA
4.3:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Monochrome Mist Shadow

View all monochrome
Lunar Dust Veil
Monochrome Fog Horizon
Arctic Explorer Suit
Arctic Whispers Snow
Basalt Stream Pebble
Charcoal Sketchbook Grey