Palette

Mystic Forest Fog

The muted, serene colors of an ancient forest as morning mist gently rolls through the trees.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Forest Fog 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 Mystic Forest Fog.

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

Data visualization

#3D4F4F#657D7D#90A3A3#BFCAC9#E2E8E6

Palette guide

How to use Mystic Forest Fog

Overview

The Mystic Forest Fog palette presents the muted, serene colors of an ancient forest as morning mist gently rolls through the trees. With a range from the deep #3D4F4F to the almost-white #E2E8E6, and including balanced mid-tones like #90A3A3, this palette exudes tranquility and a subtle elegance. It's a perfect choice for designers and developers aiming to create experiences that are calm, ethereal, and deeply peaceful. These cool, desaturated greens and greys work harmoniously to build a sophisticated and inviting atmosphere, ideal for conveying a sense of quiet natural beauty.

Best used for

Wellness and meditation application interfaces
Minimalist branding for eco-conscious businesses
Eco-tourism website design and promotional materials
Serene digital art and nature photography presentations
Product design for calm and contemplative environments
Editorial layouts requiring a sophisticated, understated feel

Suggested color roles

primary

Use #657D7D as a balanced, cool muted green-grey for primary content areas, offering a stable and calming presence.

secondary

Employ #90A3A3 for supporting elements, subheadings, or background sections that require a lighter, harmonious contrast.

accent

Apply #E2E8E6 sparingly for ethereal highlights, subtle hover states, or as a very light background to create an expansive, airy feel.

background

Utilize #E2E8E6 as a clean, expansive base, providing a bright and open canvas that allows other elements to gently emerge.

text

Choose #3D4F4F for primary body text, ensuring excellent readability and a deep, grounding presence against lighter shades.

Accessibility notes

Ensure sufficient contrast between #3D4F4F text and lighter backgrounds like #E2E8E6 or #BFCAC9 for readability.
Use #657D7D or #90A3A3 for interactive elements to ensure they are clearly discernible against lighter page elements.
Avoid placing lighter shades like #BFCAC9 text directly on #90A3A3 backgrounds without sufficient font size or weight.
Provide clear focus states for UI elements, potentially using a slightly darker shade from the palette or a subtle border.

Recommended combinations

Misty Depths

Creates a layered, atmospheric depth, ideal for hero sections or immersive backgrounds in digital experiences.

#3D4F4F · #657D7D · #90A3A3

Ethereal Light

Perfect for soft, bright transitions and elements that need to feel airy and expansive, like content cards.

#E2E8E6 · #BFCAC9 · #90A3A3

Foggy Path

Provides strong readability with dark text on a light background, balanced by a versatile mid-tone for buttons or borders.

#3D4F4F · #E2E8E6 · #657D7D

CSS variables

:root {
  --mystic-forest-fog-1: #3D4F4F;
  --mystic-forest-fog-2: #657D7D;
  --mystic-forest-fog-3: #90A3A3;
  --mystic-forest-fog-4: #BFCAC9;
  --mystic-forest-fog-5: #E2E8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-forest-fog": {
        1: "#3D4F4F",
        2: "#657D7D",
        3: "#90A3A3",
        4: "#BFCAC9",
        5: "#E2E8E6",
      }
    }
  }
}

Hex values

Color 1#3D4F4F

Color 2#657D7D

Color 3#90A3A3

Color 4#BFCAC9

Color 5#E2E8E6

Accessibility

Contrast checker

2:1Fail

3.3:1AA18

5.1:1AA

7:1AA

2:1Fail

1.7:1Fail

2.6:1Fail

3.5:1AA18

3.3:1AA18

1.7:1Fail

1.6:1Fail

2.1:1Fail

5.1:1AA

2.6:1Fail

1.6:1Fail

1.4:1Fail

7:1AA

3.5:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Mystic Forest Fog

View all cool

Aurora Shimmer Lights

Cloud Forest Mist

Foggy Moorland Mist

Misty Forest Veil

Riverside Willow Dream

Agate Grotto