Palette

Mystical Fog Shroud

Enveloping shades of deep cool grey and subtle blue, like a dense, mystical fog settling over a landscape.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystical Fog Shroud 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 Mystical Fog Shroud.

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

Data visualization

#4F5C6C#778B9C#A7BBC9#3A444E#90A3B0

Palette guide

How to use Mystical Fog Shroud

Overview

The Mystical Fog Shroud palette captures the essence of a dense, ethereal fog with its cool, muted grey-blue tones. Featuring the deep #3A444E, a grounding #4F5C6C, and the softer, enveloping #778B9C, it transitions to lighter, airy shades like #90A3B0 and #A7BBC9. This collection is perfect for projects seeking a sophisticated, serene, and slightly mysterious atmosphere. Designers and developers can leverage these hues to create calm interfaces, elegant branding, or atmospheric digital art that evokes a sense of quiet contemplation and refined minimalism.

Best used for

Minimalist web and app design
Corporate branding with a sophisticated edge
Architectural and interior design visualizations
High-end tech product interfaces
Ethereal photography and digital art
Branding for consulting or professional services

Suggested color roles

primary

A deep, grounding charcoal-blue, excellent for dominant brand elements, large headers, or primary backgrounds, conveying stability and sophistication (#3A444E).

secondary

A rich, cool grey-blue, ideal for subheadings, navigation, or significant graphical elements, adding depth without harshness (#4F5C6C).

accent

A soft, muted blue-grey, perfect for subtle highlights, interactive elements, or decorative patterns, offering a gentle visual lift (#90A3B0).

background

A very light, airy blue-grey, providing a clean and breathable canvas for content, ensuring readability with darker text (#A7BBC9).

text

The darkest shade, ensuring excellent contrast and legibility for body text, titles, and important information on lighter backgrounds like #A7BBC9 (#3A444E).

Accessibility notes

Ensure sufficient contrast when using #3A444E or #4F5C6C for text on lighter backgrounds like #A7BBC9 or #90A3B0.
Avoid pairing #90A3B0 text directly on #A7BBC9 for body copy due to potential low contrast.
White or very light text will be highly legible on the darker shades like #3A444E and #4F5C6C.
Use accessibility tools to check contrast ratios for all critical text and interactive elements to ensure WCAG compliance.

Recommended combinations

Deep Mist

A sophisticated, gradient-like blend perfect for dark-themed interfaces, elegant branding, or subtle atmospheric backgrounds.

#3A444E · #4F5C6C · #778B9C

Ethereal Shroud

A soft, harmonious trio ideal for serene backgrounds, subtle UI elements, or creating a light, airy feel.

#778B9C · #90A3B0 · #A7BBC9

Foggy Horizon

Provides strong visual contrast for impactful headlines, call-to-action buttons, or minimalist designs with clear hierarchy.

#3A444E · #778B9C · #A7BBC9

CSS variables

:root {
  --mystical-fog-shroud-1: #4F5C6C;
  --mystical-fog-shroud-2: #778B9C;
  --mystical-fog-shroud-3: #A7BBC9;
  --mystical-fog-shroud-4: #3A444E;
  --mystical-fog-shroud-5: #90A3B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystical-fog-shroud": {
        1: "#4F5C6C",
        2: "#778B9C",
        3: "#A7BBC9",
        4: "#3A444E",
        5: "#90A3B0",
      }
    }
  }
}

Hex values

Color 1#4F5C6C

Color 2#778B9C

Color 3#A7BBC9

Color 4#3A444E

Color 5#90A3B0

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

1.5:1Fail

2.6:1Fail

1.9:1Fail

1.8:1Fail

2.8:1Fail

1.4:1Fail

3.4:1AA18

1.8:1Fail

5:1AA

1.3:1Fail

1.5:1Fail

2.8:1Fail

5:1AA

3.8:1AA18

2.6:1Fail

1.4:1Fail

1.3:1Fail

3.8:1AA18

Similar palettes

More like Mystical Fog Shroud

View all cool

Abyssal Bioluminescence

Abyssal Current Glide

Bioluminescent Abyss

Deep Ocean Bloom

Midnight Ocean Trench

Oceanic Storm Surge