Back to palettes

Palette

Mystic Forest Moss

Lush, vibrant greens found in the heart of an ancient, enchanted forest floor.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3B5E3F#5D8F61#80BF84#A2F0A7#C4FFCA

Palette guide

How to use Mystic Forest Moss

Overview

The Mystic Forest Moss palette captures the lush, vibrant greens found in the heart of an ancient, enchanted forest floor. With a spectrum from the deep #3B5E3F to the bright #C4FFCA, including lively mid-tones like #80BF84, this palette radiates freshness, growth, and natural vitality. It's an excellent choice for designers and developers aiming to convey organic authenticity, health, and a lively connection to nature. These greens work harmoniously to create experiences that feel invigorating, sustainable, and deeply rooted in the beauty of the natural world, perfect for fresh and eco-conscious branding.

Best used for

  • Nature conservation branding and advocacy materials
  • Organic food packaging and healthy lifestyle brands
  • Health and wellness application interfaces and content
  • Eco-friendly product design and sustainable fashion
  • Garden center websites and botanical illustrations
  • Fresh and lively digital art evoking lush landscapes

Suggested color roles

primary

Use #5D8F61 as a vibrant, balanced green for main elements, representing the lush vitality of your design.

secondary

Employ #80BF84 for supporting visual components, offering a brighter, complementary green that adds freshness.

accent

Apply #C4FFCA as a light, airy accent, perfect for highlights, subtle backgrounds, or elements needing a fresh, natural glow.

background

Utilize #C4FFCA for a bright, refreshing background that feels open and clean, allowing darker elements to stand out crisply.

text

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

Accessibility notes

  • Ensure sufficient contrast between text in #3B5E3F and lighter backgrounds like #C4FFCA or #A2F0A7.
  • Use #5D8F61 or #80BF84 for interactive elements to ensure they are clearly discernible against lighter page elements.
  • Avoid placing lighter text (e.g., #A2F0A7) on mid-tone backgrounds (e.g., #80BF84) without checking contrast ratios.
  • Design clear hover and active states for buttons, perhaps using a darker shade for the active state to indicate interaction.

Recommended combinations

Deep Moss

Creates a rich, layered forest depth, ideal for hero sections or immersive visual narratives with a vibrant feel.

#3B5E3F · #5D8F61 · #80BF84

Fresh Growth

Perfect for airy, natural gradients or sections that need to feel bright and expansive, like content cards or headers.

#C4FFCA · #A2F0A7 · #80BF84

Vibrant Contrast

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

#3B5E3F · #C4FFCA · #5D8F61

CSS variables

:root {
  --mystic-forest-moss-1: #3B5E3F;
  --mystic-forest-moss-2: #5D8F61;
  --mystic-forest-moss-3: #80BF84;
  --mystic-forest-moss-4: #A2F0A7;
  --mystic-forest-moss-5: #C4FFCA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-forest-moss": {
        1: "#3B5E3F",
        2: "#5D8F61",
        3: "#80BF84",
        4: "#A2F0A7",
        5: "#C4FFCA",
      }
    }
  }
}

Related searches

lush green color paletteforest moss web designvibrant nature schemefresh green UI colorsorganic branding palette

Palette colors

Hex values

Color 1#3B5E3F
·
Color 2#5D8F61
·
Color 3#80BF84
·
Color 4#A2F0A7
·
Color 5#C4FFCA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
5.4:1AA
6.5:1AA
2
1.9:1Fail
1.7:1Fail
2.8:1Fail
3.3:1AA18
3
3.4:1AA18
1.7:1Fail
1.6:1Fail
1.9:1Fail
4
5.4:1AA
2.8:1Fail
1.6:1Fail
1.2:1Fail
5
6.5:1AA
3.3:1AA18
1.9:1Fail
1.2:1Fail

Similar palettes

More like Mystic Forest Moss

View all earth
Forest Floor Moss
Emerald Canopy Hush
Emerald Canopy Mist
Emerald Forest Canopy
Enchanted Forest Canopy
Enchanted Forest Canopy