Palette

Shroud Grey Mist

A subtle gradation of grays captures the serene, diffusing effect of a thick, all-encompassing fog.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4045#63696F#8C9298#B5BCC1#DDE3E8

Palette guide

How to use Shroud Grey Mist

Overview

The Shroud Grey Mist palette offers a sophisticated and calming monochrome gradient, evoking the serene diffusion of fog. Ranging from the deep, anchoring #3A4045 to the light, ethereal #DDE3E8, with harmonious mid-tones like #63696F, #8C9298, and #B5BCC1, this palette provides exceptional versatility. It's perfect for designs that require a minimalist aesthetic, a sense of quiet professionalism, or a backdrop that allows content to truly shine. Ideal for corporate, tech, or artistic projects where subtlety and understated elegance are key.

Best used for

Minimalist website designs
Corporate branding and presentations
Tech product interfaces (UI/UX)
Photography portfolio backdrops
Architectural visualization
Modern art gallery branding

Suggested color roles

primary

Use #3A4045 for main headings, strong borders, or dark mode backgrounds, providing a solid foundation.

secondary

Apply #63696F or #8C9298 for subheadings, navigation, or interactive elements, offering subtle contrast.

accent

#B5BCC1 can be used for subtle highlights, hover effects, or as a lighter background for content blocks.

background

#DDE3E8 provides a clean, neutral canvas, ensuring optimal readability and a spacious feel.

text

For primary text, #3A4045 offers excellent contrast on #DDE3E8. Use #63696F for secondary text or captions.

Accessibility notes

Ensure sufficient contrast between text and background. For example, #63696F text on #DDE3E8 should pass.
Avoid using #B5BCC1 as text on #DDE3E8 as the contrast will likely be too low.
For dark backgrounds like #3A4045, use #DDE3E8 or #B5BCC1 for text.
Maintain clear visual hierarchy and interactive states, as color differences are subtle.

Recommended combinations

Deep Fog

Ideal for high-contrast sections, dark mode elements, or strong branding.

#3A4045 · #63696F · #DDE3E8

Misty Layers

Perfect for creating subtle depth in UI elements, cards, or background gradients.

#8C9298 · #B5BCC1 · #DDE3E8

Professional Grey

Effective for corporate designs, data visualizations, or structured layouts.

#3A4045 · #8C9298 · #63696F

CSS variables

:root {
  --shroud-grey-mist-1: #3A4045;
  --shroud-grey-mist-2: #63696F;
  --shroud-grey-mist-3: #8C9298;
  --shroud-grey-mist-4: #B5BCC1;
  --shroud-grey-mist-5: #DDE3E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shroud-grey-mist": {
        1: "#3A4045",
        2: "#63696F",
        3: "#8C9298",
        4: "#B5BCC1",
        5: "#DDE3E8",
      }
    }
  }
}

Hex values

Color 1#3A4045

Color 2#63696F

Color 3#8C9298

Color 4#B5BCC1

Color 5#DDE3E8

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

5.5:1AA

8.1:1AAA

1.9:1Fail

1.8:1Fail

2.9:1Fail

4.3:1AA18

3.3:1AA18

1.8:1Fail

1.6:1Fail

2.4:1Fail

5.5:1AA

2.9:1Fail

1.6:1Fail

1.5:1Fail

8.1:1AAA

4.3:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Shroud Grey Mist