Back to palettes

Palette

Misty Moorland

A tranquil blend of soft to dark grays, mirroring the serene and often mysterious atmosphere of a moorland fog.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D9D2CF#A39B97#736E6A#4C4947#262524

Palette guide

How to use Misty Moorland

Overview

The Misty Moorland palette provides a sophisticated blend of warm, earthy greys, capturing the serene and somewhat somber atmosphere of a fog-shrouded landscape. With colors ranging from the soft #D9D2CF to the grounding #262524, and featuring rich mid-tones like #736E6A, this collection offers a timeless and calming aesthetic. Designers and developers can leverage its natural elegance for branding that seeks a grounded, authentic feel, or for user interfaces that prioritize readability and a comforting visual experience. This palette is excellent for creating a sense of heritage, craftsmanship, or quiet contemplation in digital and print media.

Best used for

  • Heritage brand identities
  • Crafts and artisan websites
  • Earthy and natural product packaging
  • Book and editorial design
  • Museum or gallery online presence
  • Cozy interior design concepts

Suggested color roles

primary

#736E6A - A warm, deep grey with a subtle brown undertone, ideal for main headings, prominent buttons, or key branding elements, providing a grounded feel.

secondary

#A39B97 - A versatile medium grey, suitable for subheadings, secondary navigation, or borders, offering a softer contrast.

accent

#4C4947 - A darker, rich charcoal grey that can highlight interactive elements, important text, or strong graphical accents, adding depth without harshness.

background

#D9D2CF - A very light, warm off-white, excellent for clean main backgrounds, large content areas, or subtle textured overlays, promoting a natural feel.

text

#262524 - A very deep, almost black, warm charcoal. Use this for primary body text to ensure maximum readability against the lighter backgrounds like #D9D2CF.

Accessibility notes

  • Ensure high contrast when using #262524 text on #D9D2CF or #A39B97 backgrounds.
  • Avoid placing #A39B97 text on #736E6A backgrounds for critical information due to potential low contrast.
  • Consider larger font sizes for text elements using the lighter colors of the palette to maintain readability.
  • The warm undertones generally make this palette accessible, but always test specific combinations.

Recommended combinations

Earthy Gradient

Great for creating gentle, natural-looking gradients for hero images, background sections, or subtle UI transitions.

#D9D2CF · #A39B97 · #736E6A

Grounded Text

Ideal for clear typography: light background, darkest text for body, and a dark grey for headings or important links.

#D9D2CF · #262524 · #4C4947

Atmospheric Depth

Excellent for dark mode interfaces, footer sections, or elements needing a strong, sophisticated, and cohesive dark presence.

#262524 · #4C4947 · #736E6A

CSS variables

:root {
  --misty-moorland-1: #D9D2CF;
  --misty-moorland-2: #A39B97;
  --misty-moorland-3: #736E6A;
  --misty-moorland-4: #4C4947;
  --misty-moorland-5: #262524;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-moorland": {
        1: "#D9D2CF",
        2: "#A39B97",
        3: "#736E6A",
        4: "#4C4947",
        5: "#262524",
      }
    }
  }
}

Related searches

warm grey color paletteearthy neutral tonessomber grey brandingnatural web design colorsfoggy landscape palette

Palette colors

Hex values

Color 1#D9D2CF
·
Color 2#A39B97
·
Color 3#736E6A
·
Color 4#4C4947
·
Color 5#262524
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.4:1AA18
6:1AA
10.3:1AAA
2
1.8:1Fail
1.8:1Fail
3.3:1AA18
5.6:1AA
3
3.4:1AA18
1.8:1Fail
1.8:1Fail
3:1AA18
4
6:1AA
3.3:1AA18
1.8:1Fail
1.7:1Fail
5
10.3:1AAA
5.6:1AA
3:1AA18
1.7:1Fail

Similar palettes

More like Misty Moorland

View all monochrome
Grey Cloud Cascade
Misty Greyscale Vista
Misty Moor Haze
Misty Moorland Dawn
Misty Moorland Walk
Mystic Moorland Fog