Back to palettes

Palette

Mystic Fog Veil

A soft, ethereal blend of muted tones, capturing the enigmatic beauty of a misty, forested morning.

neutralelegant5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5D6E7E#8A9BA8#C7D3DB#3A454E#6B7C8C

Palette guide

How to use Mystic Fog Veil

Overview

The Mystic Fog Veil palette presents a soft, ethereal blend of muted tones, capturing the enigmatic beauty of a misty, forested morning. Ranging from the deep #3A454E to the light #C7D3DB, with harmonious mid-tones like #5D6E7E and #8A9BA8, this collection creates a calm and elegant ambiance. It's an excellent choice for projects seeking a serene, sophisticated, or minimalist aesthetic. Designers and developers can leverage these harmonious blue-greys to craft clean user interfaces, timeless branding, and peaceful digital experiences that evoke quiet natural beauty.

Best used for

  • Elegant corporate branding
  • Serene web interfaces
  • Minimalist app designs
  • Nature-inspired photography
  • Sophisticated editorial layouts
  • Calm meditation applications

Suggested color roles

primary

Utilize #3A454E as the deepest, grounding blue-grey for main headings or foundational elements.

secondary

Employ #5D6E7E for supportive sections or backgrounds, adding depth without heavy contrast.

accent

Highlight interactive elements or subtle details with #8A9BA8, providing a gentle, sophisticated pop.

background

Use #C7D3DB as a light, airy base for content areas, ensuring excellent readability and a calm feel.

text

A dark blue-grey like #3A454E or a dark charcoal provides optimal readability on lighter backgrounds.

Accessibility notes

  • Ensure dark text like #3A454E has sufficient contrast on light backgrounds such as #C7D3DB for readability.
  • Avoid using #8A9BA8 or #6B7C8C for small text on #C7D3DB due to potential low contrast.
  • If using darker backgrounds, employ lighter shades for text (e.g., #C7D3DB on #3A454E) to maintain contrast.
  • Always check contrast ratios for all critical text and UI elements to meet WCAG AA standards.

Recommended combinations

Misty Horizon

Ideal for backgrounds or header sections, creating a sense of deep, layered atmosphere.

#3A454E · #5D6E7E · #6B7C8C

Soft Haze

Perfect for card backgrounds, subtle gradients, or overlays that add an ethereal touch.

#C7D3DB · #8A9BA8 · #5D6E7E

Elegant Contrast

Great for buttons, informational highlights, or subtle interactive elements.

#6B7C8C · #8A9BA8 · #3A454E

CSS variables

:root {
  --mystic-fog-veil-2-1: #5D6E7E;
  --mystic-fog-veil-2-2: #8A9BA8;
  --mystic-fog-veil-2-3: #C7D3DB;
  --mystic-fog-veil-2-4: #3A454E;
  --mystic-fog-veil-2-5: #6B7C8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-fog-veil-2": {
        1: "#5D6E7E",
        2: "#8A9BA8",
        3: "#C7D3DB",
        4: "#3A454E",
        5: "#6B7C8C",
      }
    }
  }
}

Related searches

soft grey blue palettemisty ui designcalm elegant colorsneutral brand identitymuted nature tones

Palette colors

Hex values

Color 1#5D6E7E
·
Color 2#8A9BA8
·
Color 3#C7D3DB
·
Color 4#3A454E
·
Color 5#6B7C8C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.4:1AA18
1.9:1Fail
1.2:1Fail
2
1.8:1Fail
1.9:1Fail
3.4:1AA18
1.5:1Fail
3
3.4:1AA18
1.9:1Fail
6.4:1AA
2.8:1Fail
4
1.9:1Fail
3.4:1AA18
6.4:1AA
2.3:1Fail
5
1.2:1Fail
1.5:1Fail
2.8:1Fail
2.3:1Fail

Similar palettes

More like Mystic Fog Veil

View all neutral
Porcelain Garden Path
Silk Gown Drape
Smoky Lounge
Ancient Calligraphy Ink
Ancient Marble Ruins
Ancient Marble Veins