Palette

Moss Agate Forest

Reflects the organic beauty of moss agate, intertwining deep forest greens with misty, translucent hues.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A6F54#7C9F83#AFCEC2#2B4F33#97B89E

Palette guide

How to use Moss Agate Forest

Overview

The Moss Agate Forest palette reflects the organic beauty of moss agate, intertwining deep forest greens with misty, translucent hues. It features a grounding #4A6F54, a soft #7C9F83, an airy #AFCEC2, a rich #2B4F33, and a serene #97B89E. This collection creates a natural and calming mood, perfect for designs that aim to convey tranquility, organic elegance, and a connection to nature. Designers and developers can leverage these sophisticated greens to craft serene interfaces, eco-conscious branding, or digital experiences that feel refreshing and grounded.

Best used for

Eco-friendly product branding and packaging
Nature-themed websites and blogs (e.g., gardening, hiking)
Wellness and mindfulness app interfaces
Sustainable fashion or home goods e-commerce
Environmental non-profit organizations
Interior design concepts for calming, biophilic spaces

Suggested color roles

primary

Use #4A6F54 as a grounding primary color for strong headlines or important sections, conveying stability and nature.

secondary

Employ #7C9F83 for complementary elements, subheadings, or backgrounds, adding a soft, inviting green tone.

accent

Reserve #2B4F33 for deep accents, important links, or shadows, providing grounding and rich visual depth.

background

The airy #AFCEC2 provides a light, serene background. For a deeper, calming background, use #97B89E.

text

A deep green like #2B4F33 provides excellent contrast for text on lighter backgrounds. White text works well on #2B4F33 and #4A6F54.

Accessibility notes

Ensure sufficient contrast for text on #7C9F83, #AFCEC2, and #97B89E; dark text is crucial for readability.
Avoid using #AFCEC2 and #97B89E for adjacent small text or icons due to very low contrast.
Utilize #2B4F33 or a dark charcoal for critical text on lighter backgrounds to meet WCAG AA standards.
When designing, test text and interactive elements with various background colors to confirm readability for all users.

Recommended combinations

Forest Mist

Ideal for soft gradients, background textures, or sections that need to feel light, airy, and refreshing.

#AFCEC2 · #97B89E · #7C9F83

Agate Contrast

Perfect for high-contrast headers, call-to-action buttons, or branding elements that convey depth and natural strength.

#AFCEC2 · #2B4F33 · #4A6F54

Organic Flow

Excellent for highlighting key features, navigation items, or creating data visualizations with a harmonious, natural feel.

#7C9F83 · #4A6F54 · #97B89E

CSS variables

:root {
  --moss-agate-forest-1: #4A6F54;
  --moss-agate-forest-2: #7C9F83;
  --moss-agate-forest-3: #AFCEC2;
  --moss-agate-forest-4: #2B4F33;
  --moss-agate-forest-5: #97B89E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moss-agate-forest": {
        1: "#4A6F54",
        2: "#7C9F83",
        3: "#AFCEC2",
        4: "#2B4F33",
        5: "#97B89E",
      }
    }
  }
}

Hex values

Color 1#4A6F54

Color 2#7C9F83

Color 3#AFCEC2

Color 4#2B4F33

Color 5#97B89E

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

1.6:1Fail

2.6:1Fail

1.9:1Fail

1.7:1Fail

3.1:1AA18

1.4:1Fail

3.4:1AA18

1.7:1Fail

5.5:1AA

1.3:1Fail

1.6:1Fail

3.1:1AA18

5.5:1AA

4.3:1AA18

2.6:1Fail

1.4:1Fail

1.3:1Fail

4.3:1AA18

Similar palettes

More like Moss Agate Forest

Emerald Forest Depths