Palette

Mystic Forest Veil

A serene and slightly mysterious palette reminiscent of ancient, mist-shrouded woodlands.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F2D20#2C5E43#5A8C6F#8DBAA0#BFD8C9

Palette guide

How to use Mystic Forest Veil

Overview

The Mystic Forest Veil palette offers a serene and slightly mysterious collection of greens, reminiscent of ancient, mist-shrouded woodlands. Ranging from the profound #0F2D20 to the airy #BFD8C9, and including balanced mid-tones like #5A8C6F, this palette exudes tranquility and natural elegance. It's an excellent choice for designers and developers aiming to create experiences that are calm, organic, and deeply peaceful. These cool, desaturated greens work in harmony to build a sophisticated and inviting atmosphere, ideal for conveying a sense of quiet natural beauty and a hint of the unknown.

Best used for

Nature-inspired product design and eco-friendly brands
Wellness retreats and serene web interfaces
Environmental advocacy and conservation marketing
Elegant packaging for natural or organic products
Digital art evoking tranquility and woodland scenes
Brand identity for holistic health and mindfulness

Suggested color roles

primary

Use #2C5E43 as a deep, rich forest green for main content areas, providing a strong and sophisticated natural presence.

secondary

Employ #5A8C6F as a mid-tone, softer green for supporting elements, offering gentle contrast and breathability.

accent

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

background

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

text

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

Accessibility notes

Ensure sufficient contrast between #0F2D20 text and lighter backgrounds like #BFD8C9 or #8DBAA0 for readability.
Use #2C5E43 or #5A8C6F for interactive elements to ensure they are clearly discernible against lighter page elements.
Avoid placing lighter text (e.g., #8DBAA0) on mid-tone backgrounds (e.g., #5A8C6F) 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

Veiled Depths

Creates a dark, mysterious, and layered green effect, ideal for immersive backgrounds or complex visual hierarchies.

#0F2D20 · #2C5E43 · #5A8C6F

Misty Canopy

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

#BFD8C9 · #8DBAA0 · #5A8C6F

Forest Whisper

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

#0F2D20 · #BFD8C9 · #2C5E43

CSS variables

:root {
  --mystic-forest-veil-1: #0F2D20;
  --mystic-forest-veil-2: #2C5E43;
  --mystic-forest-veil-3: #5A8C6F;
  --mystic-forest-veil-4: #8DBAA0;
  --mystic-forest-veil-5: #BFD8C9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-forest-veil": {
        1: "#0F2D20",
        2: "#2C5E43",
        3: "#5A8C6F",
        4: "#8DBAA0",
        5: "#BFD8C9",
      }
    }
  }
}

Hex values

Color 1#0F2D20

Color 2#2C5E43

Color 3#5A8C6F

Color 4#8DBAA0

Color 5#BFD8C9

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.8:1AA

9.8:1AAA

2:1Fail

1.9:1Fail

3.5:1AA18

5:1AA

3.8:1AA18

1.9:1Fail

1.8:1Fail

2.6:1Fail

6.8:1AA

3.5:1AA18

1.8:1Fail

1.4:1Fail

9.8:1AAA

5:1AA

2.6:1Fail

1.4:1Fail

Similar palettes

More like Mystic Forest Veil