Palette

Mossy Cairn

Earthy greens and soft greys evoke the tranquil beauty of ancient, moss-covered stones in a peaceful landscape.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mossy Cairn 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 Mossy Cairn.

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

Data visualization

#5A7E6E#8A9A8C#BCCFC1#4B5B4C#3E4C3C

Palette guide

How to use Mossy Cairn

Overview

The Mossy Cairn palette embodies the tranquil beauty of ancient, moss-covered stones with its earthy greens and soft greys. This collection, featuring the grounding #3E4C3C and #4B5B4C, transitions smoothly through the muted #5A7E6E and #8A9A8C, culminating in the airy #BCCFC1. It's a versatile palette for designers aiming to create an organic, natural, and calming atmosphere. Ideal for projects that require a sophisticated earthiness, Mossy Cairn provides a harmonious balance, allowing for subtle depth and a connection to nature. Each hex code contributes to a serene, understated elegance, making it perfect for brand identities or digital experiences that prioritize tranquility and a sense of timelessness.

Best used for

Organic food and beverage branding
Nature-focused photography websites
Eco-tourism marketing materials
Sustainable fashion lines
Spa and wellness digital presence
Home decor and interior design inspiration

Suggested color roles

primary

Use #3E4C3C for foundational elements like headers or strong calls to action, providing deep, organic presence.

secondary

Apply #5A7E6E for sub-sections, borders, or secondary information, offering a softer, yet rich green-grey.

accent

Employ #8A9A8C for highlights, interactive elements, or subtle graphical details, bringing a lighter, delicate touch.

background

Utilize #BCCFC1 as a clean, airy background, ensuring content stands out with a gentle, natural feel.

text

For primary body text, #3E4C3C or a dark charcoal is recommended against #BCCFC1 for optimal readability.

Accessibility notes

Ensure #3E4C3C text on #BCCFC1 background meets WCAG AA contrast for small text.
Be cautious using #8A9A8C for small text on #BCCFC1; reserve for larger titles or icons.
Test interactive elements with #5A7E6E for sufficient contrast against backgrounds.
Provide alternative text for any color-coded information to aid users with color vision deficiencies.

Recommended combinations

Deep Earth

Combines the darkest green with a mid-tone and light background for a grounded, natural feel in branding.

#3E4C3C · #5A7E6E · #BCCFC1

Stone & Moss

Offers a balanced, organic look, ideal for website sections or product packaging, evoking a soft, natural texture.

#4B5B4C · #8A9A8C · #BCCFC1

Subtle Harmony

Creates a gentle, cohesive aesthetic for user interfaces or editorial layouts, emphasizing calmness and readability.

#5A7E6E · #8A9A8C · #BCCFC1

CSS variables

:root {
  --mossy-cairn-1: #5A7E6E;
  --mossy-cairn-2: #8A9A8C;
  --mossy-cairn-3: #BCCFC1;
  --mossy-cairn-4: #4B5B4C;
  --mossy-cairn-5: #3E4C3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-cairn": {
        1: "#5A7E6E",
        2: "#8A9A8C",
        3: "#BCCFC1",
        4: "#4B5B4C",
        5: "#3E4C3C",
      }
    }
  }
}

Hex values

Color 1#5A7E6E

Color 2#8A9A8C

Color 3#BCCFC1

Color 4#4B5B4C

Color 5#3E4C3C

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

1.6:1Fail

2:1Fail

1.5:1Fail

1.8:1Fail

2.4:1Fail

3.1:1AA18

2.8:1Fail

1.8:1Fail

4.4:1AA18

5.6:1AA

1.6:1Fail

2.4:1Fail

4.4:1AA18

1.3:1Fail

2:1Fail

3.1:1AA18

5.6:1AA

1.3:1Fail

Similar palettes

More like Mossy Cairn

Botanical Study Greens

Enchanted Forest Lumina

Forest Bark Comfort