Palette

Misty Moor Haze

A calming grayscale gradient capturing the soft, elusive atmosphere of a mist-shrouded moorland.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#6D6D6D#8E8E8E#AFAFAF#D1D1D1

Palette guide

How to use Misty Moor Haze

Overview

The Misty Moor Haze palette offers a calming grayscale gradient, capturing the soft, elusive atmosphere of a mist-shrouded moorland. With shades ranging from the deep '#4A4A4A' to the light and airy '#D1D1D1', and including the balanced mid-tones '#6D6D6D', '#8E8E8E', and '#AFAFAF', this palette is perfect for creating minimalist and sophisticated digital experiences. Designers and developers will find these colors highly versatile for establishing a clean, professional, and understated aesthetic. It's an excellent choice for applications that require focus, clarity, and a timeless appeal, from corporate branding to architectural portfolios, ensuring visual harmony and elegance.

Best used for

Minimalist website design
Architectural and interior design portfolios
Photography showcases
Corporate and professional branding
Tech startup UI/UX
Sophisticated print media layouts

Suggested color roles

primary

Use '#4A4A4A' as the strong, grounding primary color for headers, key text, and impactful elements.

secondary

Employ '#6D6D6D' for supporting content, subheadings, or secondary navigation, adding depth.

accent

Apply '#8E8E8E' for subtle highlights, decorative lines, or hover states, providing gentle contrast.

background

Utilize '#D1D1D1' as the light, expansive background for a clean and uncluttered canvas.

text

For optimal readability, use '#4A4A4A' for primary body text, ensuring excellent contrast on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between '#4A4A4A' text on '#D1D1D1' background for readability.
Avoid using '#AFAFAF' or '#8E8E8E' for small, critical text, as contrast may be insufficient.
Provide clear visual hierarchy using varying shades of gray to differentiate content.
Test interactive elements to ensure distinct states for focus and hover are easily perceivable.

Recommended combinations

Deep Contrast

Creates a strong, clear visual hierarchy, ideal for headers, footers, and main content blocks.

#4A4A4A · #6D6D6D · #D1D1D1

Subtle Layers

Perfect for nuanced backgrounds, card elements, or sections requiring a sophisticated, layered feel.

#8E8E8E · #AFAFAF · #6D6D6D

Hazy Gradient

Excellent for smooth visual transitions, subtle background gradients, or atmospheric UI elements.

#D1D1D1 · #AFAFAF · #8E8E8E

CSS variables

:root {
  --misty-moor-haze-1: #4A4A4A;
  --misty-moor-haze-2: #6D6D6D;
  --misty-moor-haze-3: #8E8E8E;
  --misty-moor-haze-4: #AFAFAF;
  --misty-moor-haze-5: #D1D1D1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-moor-haze": {
        1: "#4A4A4A",
        2: "#6D6D6D",
        3: "#8E8E8E",
        4: "#AFAFAF",
        5: "#D1D1D1",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#6D6D6D

Color 3#8E8E8E

Color 4#AFAFAF

Color 5#D1D1D1

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4:1AA18

5.8:1AA

1.7:1Fail

1.6:1Fail

2.4:1Fail

3.4:1AA18

2.7:1Fail

1.6:1Fail

1.5:1Fail

2.1:1Fail

4:1AA18

2.4:1Fail

1.5:1Fail

1.4:1Fail

5.8:1AA

3.4:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Misty Moor Haze