Back to palettes

Palette

Misty Mountain Pines

Serene cool greens and greys inspired by distant pine forests shrouded in a cool mountain mist.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4D5E58#6B7F76#8FA295#B8C6BE#E2EBE5

Palette guide

How to use Misty Mountain Pines

Overview

The "Misty Mountain Pines" palette offers a sophisticated blend of cool greens and muted greys, evoking the serene and tranquil atmosphere of a distant, fog-shrouded forest. This harmonious collection, featuring hues like the deep forest green #4D5E58, the calming mid-tone #8FA295, and the airy, near-white #E2EBE5, is perfect for projects seeking a natural, understated elegance. Designers and developers will find its balanced range ideal for creating environments that feel grounded yet expansive. Its inherent coolness ensures a clean, refreshing aesthetic, making it versatile for both digital interfaces and print materials that demand a touch of natural tranquility.

Best used for

  • Eco-conscious brand identity and packaging
  • Wellness and meditation application interfaces
  • Nature photography portfolios and blogs
  • Interior design concepts for calm, minimalist spaces
  • Sustainable product websites and marketing materials
  • Outdoor apparel and gear branding

Suggested color roles

primary

#4D5E58. A deep, grounding forest green, ideal for primary branding elements, prominent headings, or substantial UI components that require a strong, stable anchor.

secondary

#6B7F76. A versatile mid-tone green-grey, perfect for subheadings, active states, or as a supportive background layer that adds depth without overwhelming.

accent

#B8C6BE. A soft, muted pale green, best used sparingly for subtle highlights, interactive elements, or delicate graphic details to draw gentle attention.

background

#E2EBE5. A very light, almost off-white, providing a clean, expansive canvas for content, ensuring readability and a fresh, airy feel.

text

#4D5E58. For optimal readability, use the darkest shade from the palette for body text against lighter backgrounds. Alternatively, a deep charcoal or pure black can provide even higher contrast.

Accessibility notes

  • Ensure sufficient contrast between #4D5E58 text and #E2EBE5 background to meet WCAG AA standards for readability.
  • Avoid placing mid-tones like #6B7F76 on #8FA295 for text, as their proximity in value will likely fail contrast requirements.
  • Use #E2EBE5 for text only on the darkest palette colors, such as #4D5E58, to maintain legibility.
  • Always test color combinations with accessibility checkers, especially for interactive elements and crucial information display.

Recommended combinations

Deep Forest Contrast

Ideal for main content blocks, headers on light backgrounds, or hero sections where strong visual hierarchy is needed with a touch of natural depth.

#4D5E58 · #E2EBE5 · #6B7F76

Misty Grove Blend

Excellent for subtle gradients, layered backgrounds, or illustrations that require a soft, atmospheric transition, reflecting a misty, natural scene.

#6B7F76 · #8FA295 · #B8C6BE

Tranquil Ascent

A balanced trio for branding, feature cards, or infographic elements, providing clear visual separation while maintaining the palette's serene and grounded feel.

#4D5E58 · #B8C6BE · #E2EBE5

CSS variables

:root {
  --misty-mountain-pines-1: #4D5E58;
  --misty-mountain-pines-2: #6B7F76;
  --misty-mountain-pines-3: #8FA295;
  --misty-mountain-pines-4: #B8C6BE;
  --misty-mountain-pines-5: #E2EBE5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-mountain-pines": {
        1: "#4D5E58",
        2: "#6B7F76",
        3: "#8FA295",
        4: "#B8C6BE",
        5: "#E2EBE5",
      }
    }
  }
}

Related searches

cool green color palettenature inspired brand colorsserene grey green schememisty forest aestheticmuted earth tone palette

Palette colors

Hex values

Color 1#4D5E58
·
Color 2#6B7F76
·
Color 3#8FA295
·
Color 4#B8C6BE
·
Color 5#E2EBE5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.9:1AA18
5.6:1AA
2
1.6:1Fail
1.6:1Fail
2.4:1Fail
3.5:1AA18
3
2.5:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
3.9:1AA18
2.4:1Fail
1.5:1Fail
1.5:1Fail
5
5.6:1AA
3.5:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Misty Mountain Pines

View all cool
Emerald Peak Summit
Dewdrop Emerald Vine
Emerald Bamboo Sway
Emerald Grove Sanctuary
Emerald River Stone
Emerald Valley Mist