Back to palettes

Palette

Misty Morning Meadow

Soft, muted greens and greys evoking the tranquil, dew-kissed ambiance of a misty meadow at dawn.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9AB0A3#C2D1C7#EBF3EF#7D8C7F#B2C7B7

Palette guide

How to use Misty Morning Meadow

Overview

The Misty Morning Meadow palette features soft, muted greens and greys, perfectly evoking the tranquil, dew-kissed ambiance of a meadow at dawn. With calming hues like the earthy #9AB0A3, the airy #EBF3EF, and the grounding #7D8C7F, this palette is a designer's dream for projects requiring a natural, serene, and understated aesthetic. It provides a harmonious balance that is both fresh and comforting, making it ideal for creating user experiences that feel organic and peaceful for both digital and physical applications.

Best used for

  • Eco-friendly and sustainable brand identities
  • Organic product packaging
  • Wellness and mindfulness apps
  • Interior design visualization
  • Personal blogs and portfolios
  • Nature-inspired digital art

Suggested color roles

primary

Utilize #9AB0A3 as a core brand color or for large, calming sections of your design, establishing a natural feel.

secondary

Employ #B2C7B7 for supporting elements, subheadings, or secondary navigation, providing a subtle, fresh accent.

accent

Reserve #7D8C7F for subtle emphasis, interactive elements, or important links, adding depth without harshness.

background

Choose #EBF3EF as a clean, light background to provide an open, airy canvas that enhances readability.

text

For optimal readability, use #7D8C7F for body text on light backgrounds like #EBF3EF, ensuring a gentle yet clear contrast.

Accessibility notes

  • Ensure #7D8C7F text on #EBF3EF meets WCAG AA contrast for body text; consider a darker neutral for small text.
  • Avoid using #C2D1C7 for small text or critical information on light backgrounds, as contrast may be insufficient.
  • Always test the contrast of interactive elements to ensure they are easily distinguishable for all users.
  • The darker shades, #9AB0A3 and #7D8C7F, are best suited for text on lighter backgrounds within this palette.

Recommended combinations

Meadow Depth

Creates strong, layered sections or prominent headers, providing a sense of natural depth.

#7D8C7F · #9AB0A3 · #B2C7B7

Dewy Light

Excellent for soft backgrounds, card elements, or containers that require gentle visual separation.

#EBF3EF · #C2D1C7 · #9AB0A3

Natural Highlight

Use this combination for interactive elements, icons, or subtle calls to action against a light base.

#EBF3EF · #7D8C7F · #9AB0A3

CSS variables

:root {
  --misty-morning-meadow-1: #9AB0A3;
  --misty-morning-meadow-2: #C2D1C7;
  --misty-morning-meadow-3: #EBF3EF;
  --misty-morning-meadow-4: #7D8C7F;
  --misty-morning-meadow-5: #B2C7B7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning-meadow": {
        1: "#9AB0A3",
        2: "#C2D1C7",
        3: "#EBF3EF",
        4: "#7D8C7F",
        5: "#B2C7B7",
      }
    }
  }
}

Related searches

misty green palettetranquil meadow colorsmuted nature tonesorganic brand colorscalming green grey

Palette colors

Hex values

Color 1#9AB0A3
·
Color 2#C2D1C7
·
Color 3#EBF3EF
·
Color 4#7D8C7F
·
Color 5#B2C7B7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
1.5:1Fail
1.3:1Fail
2
1.5:1Fail
1.4:1Fail
2.2:1Fail
1.1:1Fail
3
2:1Fail
1.4:1Fail
3.1:1AA18
1.6:1Fail
4
1.5:1Fail
2.2:1Fail
3.1:1AA18
2:1Fail
5
1.3:1Fail
1.1:1Fail
1.6:1Fail
2:1Fail

Similar palettes

More like Misty Morning Meadow

View all neutral