Back to palettes

Palette

Muted Moss Retreat

A tranquil palette drawing from the soft, damp greens of a quiet, moss-covered forest retreat.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Muted Moss Retreat 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 Muted Moss Retreat.

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

Data visualization

#5C8C80#9EB19E#C0C9C0#7B9F8C#4E7A7A

Palette guide

How to use Muted Moss Retreat

Overview

The Muted Moss Retreat palette is a tranquil collection drawing from the soft, damp greens of a quiet, moss-covered forest. It features a deep teal-green (#5C8C80), a calming sage green (#9EB19E), and a very light green-grey (#C0C9C0). A richer forest green (#7B9F8C) and a profound dark teal (#4E7A7A) complete the set, offering depth and natural variation. This palette is ideal for designers and developers aiming to evoke a sense of calm, nature, and organic serenity, perfect for eco-conscious projects or peaceful digital environments.

Best used for

  • Nature-themed brand identities
  • Wellness and mindfulness applications
  • Eco-conscious product and packaging design
  • Garden design and landscaping websites
  • Serene digital experiences and interfaces
  • Outdoor and adventure gear branding

Suggested color roles

primary

Utilize #5C8C80 (muted teal-green) as an inviting primary color for headlines or key content areas, conveying depth.

secondary

Employ #7B9F8C (forest green) for subheadings, navigation, or to add a supportive natural tone to layouts.

accent

Incorporate #9EB19E (soft sage) for delicate highlights, decorative elements, or subtle call-to-action buttons.

background

Select #C0C9C0 (very light green-grey) as an airy, clean backdrop that allows the greens to softly emerge.

text

Choose #4E7A7A (deepest teal) for all body text and important information, ensuring excellent readability and a natural aesthetic.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing lighter colors like #9EB19E with backgrounds such as #C0C9C0.
  • The very light #C0C9C0 requires a dark text color, like #4E7A7A or a deep charcoal, for optimal readability.
  • Avoid using #9EB19E for small text on #C0C9C0 due to insufficient contrast; it's better for larger elements.
  • The deepest color, #4E7A7A, provides excellent contrast for text against all lighter shades in this palette.

Recommended combinations

Forest Depth

Creates strong, grounded contrasts ideal for headers, footers, or important navigational elements.

#4E7A7A · #5C8C80 · #9EB19E

Mossy Softness

Ideal for serene backgrounds, subtle gradients, or soft graphical elements, evoking tranquility.

#C0C9C0 · #9EB19E · #7B9F8C

Calm Contrast

Perfect for highlighting content blocks, using the light tone as a background with contrasting mid and dark text.

#7B9F8C · #C0C9C0 · #4E7A7A

CSS variables

:root {
  --muted-moss-retreat-1: #5C8C80;
  --muted-moss-retreat-2: #9EB19E;
  --muted-moss-retreat-3: #C0C9C0;
  --muted-moss-retreat-4: #7B9F8C;
  --muted-moss-retreat-5: #4E7A7A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-moss-retreat": {
        1: "#5C8C80",
        2: "#9EB19E",
        3: "#C0C9C0",
        4: "#7B9F8C",
        5: "#4E7A7A",
      }
    }
  }
}

Related searches

muted moss greenforest retreat palettetranquil green huescalm nature colorsearthy teal green

Palette colors

Hex values

Color 1#5C8C80
·
Color 2#9EB19E
·
Color 3#C0C9C0
·
Color 4#7B9F8C
·
Color 5#4E7A7A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.2:1Fail
1.3:1Fail
1.3:1Fail
2
1.7:1Fail
1.3:1Fail
1.3:1Fail
2.1:1Fail
3
2.2:1Fail
1.3:1Fail
1.7:1Fail
2.8:1Fail
4
1.3:1Fail
1.3:1Fail
1.7:1Fail
1.6:1Fail
5
1.3:1Fail
2.1:1Fail
2.8:1Fail
1.6:1Fail

Similar palettes

More like Muted Moss Retreat

View all cool