Palette

Mystic Fog Shroud

Deep, atmospheric grays and purples capture the enigmatic beauty of a fog-covered landscape.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4E69#9A8C98#C9ADA7#E0BBE4#22223B

Palette guide

How to use Mystic Fog Shroud

Overview

The Mystic Fog Shroud palette captures the enigmatic beauty of a fog-covered landscape with deep, atmospheric grays and purples. Ranging from the profound #22223B to the ethereal #E0BBE4, with grounding tones like #4A4E69 and #C9ADA7, this collection creates a moody yet calm and sophisticated ambiance. It's an excellent choice for projects seeking a minimalist, elegant, or introspective aesthetic. Designers and developers can leverage these muted yet rich shades to craft serene user interfaces, thoughtful branding, and captivating digital experiences that evoke quiet contemplation.

Best used for

Minimalist web design
Sophisticated branding
Moody photography portfolios
Calm meditation applications
Elegant interior design concepts
Thoughtful editorial layouts

Suggested color roles

primary

Utilize #22223B as the deepest, grounding dark blue-grey for main headings or foundational elements.

secondary

Employ #4A4E69 for supportive sections or backgrounds, adding depth without heavy contrast.

accent

Highlight subtle elements or create an ethereal touch with #E0BBE4, providing a soft, gentle glow.

background

Use #C9ADA7 as a light, muted base for content areas, offering a serene canvas for readability.

text

A deep blue-grey like #22223B or a dark charcoal provides optimal readability on lighter backgrounds.

Accessibility notes

Use the darkest color, #22223B, for text on lighter backgrounds like #C9ADA7 or #E0BBE4 to ensure contrast.
Avoid using #9A8C98 or #C9ADA7 for small text on light backgrounds due to potential low contrast.
Ensure sufficient contrast between #4A4E69 and #9A8C98 if used for text and background.
Test all color pairings for WCAG AA compliance, especially for interactive elements and form fields.

Recommended combinations

Misty Depths

Ideal for deep backgrounds and subtle layering, creating a sense of receding, atmospheric space.

#22223B · #4A4E69 · #9A8C98

Ethereal Glow

Perfect for soft accents, card backgrounds, or overlays that add an ethereal, delicate touch.

#E0BBE4 · #C9ADA7 · #4A4E69

Foggy Contrast

Great for secondary text, subtle UI elements, or informational blocks that need soft emphasis.

#9A8C98 · #C9ADA7 · #22223B

CSS variables

:root {
  --mystic-fog-shroud-1: #4A4E69;
  --mystic-fog-shroud-2: #9A8C98;
  --mystic-fog-shroud-3: #C9ADA7;
  --mystic-fog-shroud-4: #E0BBE4;
  --mystic-fog-shroud-5: #22223B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-fog-shroud": {
        1: "#4A4E69",
        2: "#9A8C98",
        3: "#C9ADA7",
        4: "#E0BBE4",
        5: "#22223B",
      }
    }
  }
}

Hex values

Color 1#4A4E69

Color 2#9A8C98

Color 3#C9ADA7

Color 4#E0BBE4

Color 5#22223B

Accessibility

Contrast checker

2.5:1Fail

3.9:1AA18

4.8:1AA

1.9:1Fail

2.5:1Fail

1.5:1Fail

1.9:1Fail

4.8:1AA

3.9:1AA18

1.5:1Fail

1.2:1Fail

7.4:1AAA

4.8:1AA

1.9:1Fail

1.2:1Fail

9.1:1AAA

1.9:1Fail

4.8:1AA

7.4:1AAA

9.1:1AAA

Similar palettes

More like Mystic Fog Shroud

Mystic Fog Shroud

See it in context.

Ready when you are.

Built with Mystic Fog Shroud.

How to use Mystic Fog Shroud

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Depths

Ethereal Glow

Foggy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mystic Fog Shroud