Back to palettes

Palette

Misty Moorland Dawn

Subtle gradients of grey and cool greens evoke a serene, fog-kissed moor at sunrise.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DDE4E9#B2BEC4#7E8C8C#5F6C6A#4A5250

Palette guide

How to use Misty Moorland Dawn

Overview

The Misty Moorland Dawn palette offers a serene and contemplative atmosphere, perfectly blending cool greys with subtle green undertones. Dominated by hues like the soft #DDE4E9, the grounding #7E8C8C, and the deep #4A5250, this collection evokes the quiet beauty of a fog-kissed landscape at sunrise. Designers and developers can leverage its understated elegance for projects requiring a sense of calm, professionalism, and natural sophistication. This palette is excellent for creating clean, minimalist interfaces or tranquil branding, providing a harmonious and balanced visual experience without overwhelming the user. Its muted tones ensure excellent readability and a timeless appeal.

Best used for

  • Nature-inspired branding
  • Minimalist UI/UX design
  • Wellness and meditation apps
  • Eco-friendly product packaging
  • Architectural and interior design portfolios
  • Photography websites

Suggested color roles

primary

#5F6C6A - A deep, muted green-grey, ideal for prominent headings, primary buttons, or brand accents, providing a strong yet calming presence.

secondary

#B2BEC4 - A versatile medium grey with a cool undertone, perfect for subheadings, secondary calls-to-action, or navigational elements, offering gentle contrast.

accent

#7E8C8C - A balanced, earthy grey-green that can highlight interactive elements, small icons, or graphic details without disrupting the overall tranquility.

background

#DDE4E9 - A very light, airy grey, excellent for clean main backgrounds, large content areas, or soft gradients, ensuring a spacious feel.

text

#4A5250 - A very dark, almost black, green-grey. Use this for primary body text to ensure maximum readability against lighter backgrounds like #DDE4E9.

Accessibility notes

  • Ensure sufficient contrast when pairing #4A5250 text with lighter backgrounds like #DDE4E9 or #B2BEC4.
  • Avoid using mid-tones like #B2BEC4 and #7E8C8C for small text against similar mid-tone backgrounds.
  • Consider larger font sizes for text elements using lighter palette colors to aid readability.
  • Test color combinations for users with common forms of color blindness, as the subtle green tints might be missed.

Recommended combinations

Misty Horizon

Ideal for serene website headers, large background sections, or subtle gradient transitions, creating a sense of depth.

#DDE4E9 · #B2BEC4 · #7E8C8C

Deep Forest

Effective for strong branding elements, dark mode themes, or sections requiring high contrast and a grounded feel.

#5F6C6A · #4A5250 · #7E8C8C

Soft Touch

Excellent for clean UI elements, card backgrounds, or minimalist typography, offering clear hierarchy and gentle visual appeal.

#DDE4E9 · #B2BEC4 · #4A5250

CSS variables

:root {
  --misty-moorland-dawn-1: #DDE4E9;
  --misty-moorland-dawn-2: #B2BEC4;
  --misty-moorland-dawn-3: #7E8C8C;
  --misty-moorland-dawn-4: #5F6C6A;
  --misty-moorland-dawn-5: #4A5250;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-moorland-dawn": {
        1: "#DDE4E9",
        2: "#B2BEC4",
        3: "#7E8C8C",
        4: "#5F6C6A",
        5: "#4A5250",
      }
    }
  }
}

Related searches

calm grey green palettenature inspired color schememinimalist cool grey colorsserene web design paletteearthy muted tones for UI

Palette colors

Hex values

Color 1#DDE4E9
·
Color 2#B2BEC4
·
Color 3#7E8C8C
·
Color 4#5F6C6A
·
Color 5#4A5250
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.7:1Fail
4.3:1AA18
6.3:1AA
2
1.5:1Fail
1.8:1Fail
2.9:1Fail
4.2:1AA18
3
2.7:1Fail
1.8:1Fail
1.6:1Fail
2.3:1Fail
4
4.3:1AA18
2.9:1Fail
1.6:1Fail
1.5:1Fail
5
6.3:1AA
4.2:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Misty Moorland Dawn

View all monochrome
Misty Moorland Walk
Morning Fog
Mystic Moorland Fog
River Stone Serenity
Silent Fog Horizon
Contemplative Stone Flow