Back to palettes

Palette

Mystic Moorland Fog

A tranquil range of muted greys, evoking the soft, ethereal blanket of fog over a desolate moorland.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E5A64#6F7E8A#95A7B3#BBCDD9#3A454F

Palette guide

How to use Mystic Moorland Fog

Overview

The Mystic Moorland Fog palette is a tranquil range of muted greys, perfectly evoking the soft, ethereal blanket of fog over a desolate moorland. From the deep #3A454F and #4E5A64 to the lighter #6F7E8A, #95A7B3, and #BBCDD9, this monochrome collection offers a sophisticated and calming aesthetic. Designers and developers can utilize these shades to create serene, introspective, and minimalist digital experiences. The subtle variations in tone provide ample opportunity for depth and visual hierarchy without relying on strong color contrasts, making it ideal for clean UI, atmospheric branding, or projects that require a sense of quiet contemplation and refined simplicity. It's truly a versatile and elegant choice.

Best used for

  • Minimalist website designs
  • Architectural portfolios or firm branding
  • High-end stationery or print design
  • News or editorial platforms (for sophistication)
  • UI/UX for productivity or professional tools
  • Art gallery or museum digital presence

Suggested color roles

primary

Use #3A454F as a deep, grounding primary for backgrounds, important text, or strong UI elements, providing gravitas.

secondary

Apply #4E5A64 for subheadings, navigation, or supporting design elements, offering a harmonious mid-tone.

accent

Utilize #95A7B3 as a subtle accent for interactive elements, icons, or soft highlights, adding a gentle lift.

background

Employ #BBCDD9 as a clean, light background for content areas, ensuring readability and an airy, diffused feel.

text

For optimal readability on lighter backgrounds, #3A454F provides excellent contrast. For darker shades, use #BBCDD9 or white.

Accessibility notes

  • Ensure sufficient contrast when using #6F7E8A for text on #95A7B3; consider larger font sizes or bolder weights.
  • #3A454F offers excellent contrast against #BBCDD9 for primary text, meeting WCAG AA standards.
  • Avoid using #95A7B3 for small text on #BBCDD9 to prevent readability issues; check contrast ratios carefully.
  • For critical information, always pair a dark color like #3A454F with the lightest available background #BBCDD9.

Recommended combinations

Deep Fog

Creates a strong, dark base with a light contrast, ideal for structured layouts and clear content presentation.

#3A454F · #4E5A64 · #BBCDD9

Moorland Layers

Perfect for subtle gradients or layered UI elements, mimicking the gradual transitions of a misty landscape.

#4E5A64 · #6F7E8A · #95A7B3

Calm Contrast

Combines a dark primary with a light background and a gentle accent for sophisticated, understated designs.

#3A454F · #BBCDD9 · #95A7B3

CSS variables

:root {
  --mystic-moorland-fog-1: #4E5A64;
  --mystic-moorland-fog-2: #6F7E8A;
  --mystic-moorland-fog-3: #95A7B3;
  --mystic-moorland-fog-4: #BBCDD9;
  --mystic-moorland-fog-5: #3A454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-moorland-fog": {
        1: "#4E5A64",
        2: "#6F7E8A",
        3: "#95A7B3",
        4: "#BBCDD9",
        5: "#3A454F",
      }
    }
  }
}

Related searches

monochrome gray palettemoorland fog colorscalm mysterious UI schemeelegant muted web designgrey blue hex codes

Palette colors

Hex values

Color 1#4E5A64
·
Color 2#6F7E8A
·
Color 3#95A7B3
·
Color 4#BBCDD9
·
Color 5#3A454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.3:1AA18
1.4:1Fail
2
1.7:1Fail
1.7:1Fail
2.6:1Fail
2.3:1Fail
3
2.8:1Fail
1.7:1Fail
1.5:1Fail
3.9:1AA18
4
4.3:1AA18
2.6:1Fail
1.5:1Fail
6:1AA
5
1.4:1Fail
2.3:1Fail
3.9:1AA18
6:1AA

Similar palettes

More like Mystic Moorland Fog

View all monochrome
Misty Moorland Dawn
Misty Moorland Walk
Silent Fog Horizon
Contemplative Stone Flow
Dusky Meadow Mist
Grayscale City Rain