Palette

Misty Forest Veil

Soft, muted greens and grays capture the serene and mysterious atmosphere of a foggy forest.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Forest Veil 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 Forest Veil.

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

Data visualization

#2E473D#4F6D64#738A82#9CB1A7#CEDED9

Palette guide

How to use Misty Forest Veil

Overview

The Misty Forest Veil palette offers a deeply tranquil and natural aesthetic, perfect for designs aiming for serenity and organic elegance. Its rich greens and muted greys, such as the grounding #2E473D, the calming #4F6D64, and the airy #CEDED9, evoke the quiet mystery of a forest enveloped in fog. This cool-toned scheme provides a sophisticated yet approachable foundation for digital interfaces and print materials. Designers can leverage its earthy depth for a sense of stability, while developers will find the clear differentiation between shades useful for establishing visual hierarchy without sacrificing harmony. It’s a versatile set for creating an immersive, calm user experience.

Best used for

Nature-inspired branding
Wellness and spa websites
Eco-friendly product packaging
Meditation app interfaces
Editorial design for travel/outdoors
Sustainable fashion lookbooks

Suggested color roles

primary

Use #2E473D as a strong, grounding primary color for headers, important buttons, or brand logos, conveying depth and stability.

secondary

Apply #4F6D64 for supportive elements like subheadings, navigation links, or secondary calls to action, maintaining a calm flow.

accent

Introduce #738A82 for subtle highlights, interactive elements, or small graphic details to add gentle visual interest without overwhelming.

background

Utilize #CEDED9 as a light, ethereal background, providing a clean canvas that enhances readability and the overall sense of tranquility.

text

For body text, use #2E473D or a dark charcoal to ensure excellent readability against lighter backgrounds. For headings, #4F6D64 can also be effective.

Accessibility notes

Ensure sufficient contrast between #2E473D and #CEDED9 for all text to meet WCAG AA standards.
Use #4F6D64 for larger text or headings on lighter backgrounds like #CEDED9 to maintain legibility.
Avoid placing light colors like #9CB1A7 directly on #CEDED9 for interactive elements due to potential low contrast.
Test color pairings for button states and focus indicators to ensure clear visual cues for users.

Recommended combinations

Deep Forest

Ideal for a rich, immersive visual, suitable for hero sections or brand statements.

#2E473D · #4F6D64 · #738A82

Misty Light

Excellent for spacious layouts, content backgrounds, or subtle UI elements requiring softness.

#9CB1A7 · #CEDED9 · #738A82

Earthy Contrast

A balanced trio for strong visual hierarchy, perfect for text on background with a supportive element.

#2E473D · #CEDED9 · #4F6D64

CSS variables

:root {
  --misty-forest-veil-2-1: #2E473D;
  --misty-forest-veil-2-2: #4F6D64;
  --misty-forest-veil-2-3: #738A82;
  --misty-forest-veil-2-4: #9CB1A7;
  --misty-forest-veil-2-5: #CEDED9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-forest-veil-2": {
        1: "#2E473D",
        2: "#4F6D64",
        3: "#738A82",
        4: "#9CB1A7",
        5: "#CEDED9",
      }
    }
  }
}

Hex values

Color 1#2E473D

Color 2#4F6D64

Color 3#738A82

Color 4#9CB1A7

Color 5#CEDED9

Accessibility

Contrast checker

1.8:1Fail

2.7:1Fail

4.4:1AA18

7.2:1AAA

1.8:1Fail

1.5:1Fail

2.5:1Fail

4.1:1AA18

2.7:1Fail

1.5:1Fail

1.6:1Fail

2.7:1Fail

4.4:1AA18

2.5:1Fail

1.6:1Fail

7.2:1AAA

4.1:1AA18

2.7:1Fail

1.6:1Fail

Similar palettes

More like Misty Forest Veil

Misty Forest Veil

See it in context.

Ready when you are.

Built with Misty Forest Veil.

How to use Misty Forest Veil

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Forest

Misty Light

Earthy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Forest Veil