Palette

Moss Stone Serene

A calming blend of natural greys and a deep forest green, evoking peaceful, stony landscapes.

MonochromeMinimal5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moss Stone Serene 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 Stone Serene.

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

Data visualization

#3F474A#6C7A89#ABB7BB#2A3C24#D5DCE2

Palette guide

How to use Moss Stone Serene

Overview

The Moss Stone Serene palette offers a calming blend of natural greys and a deep forest green, perfect for evoking tranquil, stony landscapes and minimal aesthetics. Anchored by the profound #2A3C24 deep moss green, it harmonizes beautifully with the cool grey-blues of #3F474A and #6C7A89. The lighter tones, #ABB7BB and the near-white #D5DCE2, provide essential contrast and breathability. This palette is ideal for designers seeking a sophisticated, understated natural feel, suitable for interfaces where clarity and a serene user experience are paramount. Its subtle complexity allows for rich visual depth without overwhelming the senses, making it highly adaptable for various applications requiring an earthy, yet refined, touch.

Best used for

Minimalist web design and user interfaces
Branding for eco-friendly or sustainable products
Interior design mood boards for tranquil spaces
Photography portfolios focusing on nature or landscapes
Relaxation and wellness app interfaces
Editorial design for nature-themed publications

Suggested color roles

primary

Use #2A3C24 for strong, foundational elements like navigation bars or key calls to action, providing a deep, natural anchor.

secondary

Apply #3F474A for subheadings, active states, or detailed graphical elements to add depth and a sophisticated grey tone.

accent

Utilize #6C7A89 for subtle highlights, interactive elements, or secondary data visualization points, offering a softer, yet distinct touch.

background

Employ #D5DCE2 as a clean, serene background for content areas, ensuring excellent readability and a spacious feel.

text

For primary body text, use #3F474A or a true charcoal black to ensure optimal contrast against lighter backgrounds like #D5DCE2.

Accessibility notes

Ensure #3F474A text on #D5DCE2 background meets WCAG AA contrast standards for readability.
Avoid using #ABB7BB for small text against #D5DCE2; reserve it for larger headings or graphical elements.
Use #2A3C24 for high-contrast text or icons on light backgrounds to ensure visibility.
Check all interactive elements for sufficient contrast in both normal and hover/focus states.

Recommended combinations

Earthy Foundation

Ideal for a strong brand presence, with deep green as primary, dark grey for secondary, and light grey as background.

#2A3C24 · #3F474A · #D5DCE2

Soft Minimalism

Excellent for serene interfaces, using mid-grey as primary, light grey for accents, and very light grey for backgrounds.

#6C7A89 · #ABB7BB · #D5DCE2

Natural Contrast

For striking yet calm visuals, deep green for impactful elements, light grey for details, and near-white for spaciousness.

#2A3C24 · #ABB7BB · #D5DCE2

CSS variables

:root {
  --moss-stone-serene-1: #3F474A;
  --moss-stone-serene-2: #6C7A89;
  --moss-stone-serene-3: #ABB7BB;
  --moss-stone-serene-4: #2A3C24;
  --moss-stone-serene-5: #D5DCE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moss-stone-serene": {
        1: "#3F474A",
        2: "#6C7A89",
        3: "#ABB7BB",
        4: "#2A3C24",
        5: "#D5DCE2",
      }
    }
  }
}

Hex values

Color 1#3F474A

Color 2#6C7A89

Color 3#ABB7BB

Color 4#2A3C24

Color 5#D5DCE2

Accessibility

Contrast checker

2.2:1Fail

4.6:1AA

1.2:1Fail

6.9:1AA

2.2:1Fail

2.1:1Fail

2.7:1Fail

3.2:1AA18

4.6:1AA

2.1:1Fail

5.8:1AA

1.5:1Fail

1.2:1Fail

2.7:1Fail

5.8:1AA

8.6:1AAA

6.9:1AA

3.2:1AA18

1.5:1Fail

8.6:1AAA

Similar palettes

More like Moss Stone Serene

Minimalist Loft Whites

Zen Rock Garden