Back to palettes

Palette

Foggy Moorland Mist

Muted greens and cool greys evoke the tranquil yet mysterious atmosphere of a foggy moorland.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Foggy Moorland Mist 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 Foggy Moorland Mist.

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

Data visualization

#4E5759#6B7578#899396#A6B1B4#C3CFD2

Palette guide

How to use Foggy Moorland Mist

Overview

The Foggy Moorland Mist palette evokes the tranquil yet mysterious atmosphere of a vast, misty moorland. Composed of muted greens and cool greys, from the deep #4E5759 to the airy #C3CFD2, this palette offers a sophisticated natural aesthetic. Designers and developers can utilize these subtle, earthy tones to create serene digital experiences, eco-conscious branding, or calming user interfaces. The gentle progression of shades provides depth and harmony, making it ideal for projects that aim to convey peace, environmental awareness, or quiet reflection.

Best used for

  • Environmental and sustainability branding
  • Wellness and meditation app design
  • Serene website backgrounds and textures
  • Natural product packaging
  • Documentary and nature film aesthetics
  • Minimalist interior design concepts

Suggested color roles

primary

Use #6B7578 for main content, large text blocks, or as a grounding color in layouts.

secondary

Apply #4E5759 for deeper accents, navigation, or strong headers to add subtle weight and contrast.

accent

Utilize #A6B1B4 for subtle highlights, interactive elements, or delicate graphical details to provide gentle emphasis.

background

The light and airy #C3CFD2 serves as an excellent primary background, creating a spacious and calm canvas.

text

#4E5759 or #6B7578 offers good readability on lighter backgrounds, maintaining the subdued natural feel.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter shades like #A6B1B4 on #C3CFD2.
  • For critical information, use darker text colors such as #4E5759 against the lightest backgrounds.
  • Avoid using mid-tone colors for small text on similarly toned backgrounds, as readability may suffer.
  • Provide ample spacing and clear typography to enhance readability within this subtle palette.

Recommended combinations

Misty Depth

For creating a gradual sense of depth and layering in sections or background gradients.

#4E5759 · #6B7578 · #899396

Calm Horizon

Ideal for light, airy designs, conveying openness and tranquility, perfect for primary interfaces.

#C3CFD2 · #A6B1B4 · #899396

Natural Gradient

A harmonious blend for smooth transitions, such as hero sections or subtle background animations.

#6B7578 · #A6B1B4 · #C3CFD2

CSS variables

:root {
  --foggy-moorland-mist-1: #4E5759;
  --foggy-moorland-mist-2: #6B7578;
  --foggy-moorland-mist-3: #899396;
  --foggy-moorland-mist-4: #A6B1B4;
  --foggy-moorland-mist-5: #C3CFD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "foggy-moorland-mist": {
        1: "#4E5759",
        2: "#6B7578",
        3: "#899396",
        4: "#A6B1B4",
        5: "#C3CFD2",
      }
    }
  }
}

Related searches

muted nature palettecalm grey greensubtle foggy colorstranquil web designmoorland inspired

Palette colors

Hex values

Color 1#4E5759
·
Color 2#6B7578
·
Color 3#899396
·
Color 4#A6B1B4
·
Color 5#C3CFD2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.4:1AA18
4.7:1AA
2
1.6:1Fail
1.5:1Fail
2.2:1Fail
3:1Fail
3
2.4:1Fail
1.5:1Fail
1.4:1Fail
2:1Fail
4
3.4:1AA18
2.2:1Fail
1.4:1Fail
1.4:1Fail
5
4.7:1AA
3:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Foggy Moorland Mist

View all cool
Riverside Willow Dream
Misted Woodland Path
Misty Cypress Grove
Misty Forest Veil
Misty Highland Moor
Mystic Forest Fog