Palette

Mystic Fog Veil

Ethereal and cool tones that capture the quiet mystery of a misty morning landscape.

coolcalm5 colors

More cool 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

#A9B3BB#C4CDD2#E1E8EB#7D8893#6B7782

Palette guide

How to use Mystic Fog Veil

Overview

The Mystic Fog Veil palette offers a collection of ethereal and cool grey tones, perfectly capturing the quiet mystery of a misty morning landscape. Its soft, muted hues like the foundational #A9B3BB, the lighter #C4CDD2, and the deep anchoring shade of #6B7782 provide a sophisticated and calming foundation for any design. This palette is designed to evoke tranquility and subtlety, making it ideal for projects that require a serene yet elegant aesthetic. Designers and developers can leverage these shades to create interfaces and visuals that feel airy, clean, and deeply peaceful, avoiding harsh contrasts while maintaining depth.

Best used for

Minimalist UI design for wellness applications
Serene brand identities for luxury goods
Architectural visualization and interior design concepts
Calm and sophisticated web design layouts
Subtle illustrations and digital art with an ethereal feel
Print materials requiring a refined, understated elegance

Suggested color roles

primary

Use #A9B3BB as a balanced, foundational mid-tone grey for main content areas or large UI components, providing a steady and calm presence.

secondary

Employ #C4CDD2 for supporting elements, subheadings, or background sections that need a slightly brighter, yet harmonious, contrast to the primary hue.

accent

Apply #E1E8EB sparingly for delicate highlights, subtle hover states, or as a very light background to create an airy, expansive feel.

background

Utilize #E1E8EB as a clean, expansive base, offering a bright and open canvas that allows other elements to gently emerge.

text

Choose #6B7782 for primary body text, ensuring excellent readability against lighter backgrounds, or use a near-black for stronger contrast.

Accessibility notes

Ensure sufficient contrast between #6B7782 text and lighter backgrounds like #E1E8EB or #C4CDD2 for readability.
Use #A9B3BB or #7D8893 for interactive elements to provide better visual distinction than lighter greys.
Avoid placing lighter shades like #E1E8EB text directly on #C4CDD2 backgrounds without sufficient font size or weight.
Provide clear focus states for UI elements, potentially using a slightly darker shade from the palette or a subtle border.

Recommended combinations

Deep Mist

For creating a sense of depth and layered atmospheric presence in backgrounds or complex UI elements.

#6B7782 · #7D8893 · #A9B3BB

Airy Calm

Ideal for clean, bright interfaces where a sense of openness and lightness is desired, such as dashboards or content cards.

#E1E8EB · #C4CDD2 · #A9B3BB

Solid Foundation

Provides a strong, readable text on a light background, balanced by a versatile mid-tone for buttons or borders.

#6B7782 · #E1E8EB · #A9B3BB

CSS variables

:root {
  --mystic-fog-veil-1: #A9B3BB;
  --mystic-fog-veil-2: #C4CDD2;
  --mystic-fog-veil-3: #E1E8EB;
  --mystic-fog-veil-4: #7D8893;
  --mystic-fog-veil-5: #6B7782;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-fog-veil": {
        1: "#A9B3BB",
        2: "#C4CDD2",
        3: "#E1E8EB",
        4: "#7D8893",
        5: "#6B7782",
      }
    }
  }
}

Hex values

Color 1#A9B3BB

Color 2#C4CDD2

Color 3#E1E8EB

Color 4#7D8893

Color 5#6B7782

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.1:1Fail

1.3:1Fail

2.2:1Fail

2.8:1Fail

1.7:1Fail

1.3:1Fail

2.9:1Fail

3.7:1AA18

1.7:1Fail

2.2:1Fail

2.9:1Fail

1.3:1Fail

2.1:1Fail

2.8:1Fail

3.7:1AA18

1.3:1Fail

Similar palettes

More like Mystic Fog Veil

Mystic Fog Veil

See it in context.

Ready when you are.

Built with Mystic Fog Veil.

How to use Mystic Fog Veil

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Mist

Airy Calm

Solid Foundation

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mystic Fog Veil