Palette

Misty Moorland Walk

Soft, muted greys and off-whites recreate the peaceful, hushed atmosphere of a misty moorland.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D3E42#62666B#989DA3#C9CDD1#EAECEE

Palette guide

How to use Misty Moorland Walk

Overview

The Misty Moorland Walk palette offers a classic, understated monochrome experience, embodying the quiet serenity of a fog-laden landscape. With a spectrum ranging from the deep #3D3E42 to the airy #EAECEE, and anchored by versatile mid-tones like #989DA3, this collection is ideal for designers and developers seeking timeless elegance and robust functionality. It provides a solid foundation for clean, professional interfaces, corporate branding, or minimalist web designs where clarity and focus are paramount. The subtle variations in grey create depth without distraction, ensuring a sophisticated and highly adaptable visual language for any project.

Best used for

Corporate websites and dashboards
Minimalist portfolio sites
SaaS product interfaces
Editorial design and publishing
Photography showcases
Architectural firm branding

Suggested color roles

primary

#62666B - A strong, balanced medium-dark grey, perfect for primary headings, call-to-action buttons, or main navigation, providing clear emphasis.

secondary

#989DA3 - A versatile mid-grey, suitable for subheadings, secondary buttons, or borders, offering gentle visual separation and hierarchy.

accent

#C9CDD1 - A lighter, soft grey that can highlight interactive elements, small icons, or subtle graphic details, providing a delicate touch.

background

#EAECEE - A very light, almost white grey, excellent for clean main backgrounds, large content areas, or modal overlays, ensuring readability.

text

#3D3E42 - A deep, dark charcoal grey. Use this for all primary body text to ensure maximum readability and a professional appearance against lighter backgrounds.

Accessibility notes

Ensure #3D3E42 text on #EAECEE or #C9CDD1 backgrounds meets WCAG AA contrast standards.
Avoid using #989DA3 text on #C9CDD1 backgrounds for small font sizes due to insufficient contrast.
Use clear visual indicators (e.g., underlines, icons) in addition to color for interactive states.
Monochrome palettes generally perform well for colorblind users, but subtle shifts in lightness should still be clear.

Recommended combinations

Foggy Depths

Ideal for creating deep, layered sections, dark mode interfaces, or bold typographic statements with strong contrast.

#3D3E42 · #62666B · #989DA3

Clear Horizon

Excellent for clean, spacious layouts, card backgrounds, or primary content areas, providing a light and airy feel with good readability.

#EAECEE · #C9CDD1 · #62666B

Subtle Interaction

Perfect for standard UI elements: light background, dark text, and a mid-grey for secondary information or disabled states.

#EAECEE · #3D3E42 · #989DA3

CSS variables

:root {
  --misty-moorland-walk-1: #3D3E42;
  --misty-moorland-walk-2: #62666B;
  --misty-moorland-walk-3: #989DA3;
  --misty-moorland-walk-4: #C9CDD1;
  --misty-moorland-walk-5: #EAECEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-moorland-walk": {
        1: "#3D3E42",
        2: "#62666B",
        3: "#989DA3",
        4: "#C9CDD1",
        5: "#EAECEE",
      }
    }
  }
}

Hex values

Color 1#3D3E42

Color 2#62666B

Color 3#989DA3

Color 4#C9CDD1

Color 5#EAECEE

Accessibility

Contrast checker

1.8:1Fail

3.9:1AA18

6.7:1AA

9:1AAA

1.8:1Fail

2.1:1Fail

3.6:1AA18

4.9:1AA

3.9:1AA18

2.1:1Fail

1.7:1Fail

2.3:1Fail

6.7:1AA

3.6:1AA18

1.7:1Fail

1.3:1Fail

9:1AAA

4.9:1AA

2.3:1Fail

1.3:1Fail

Similar palettes

More like Misty Moorland Walk

Misty Greyscale Vista

Misty Horizon Calm

Mystic Moorland Fog