Back to palettes

Palette

Mossy Stone Retreat

Soft, muted greys and blues blend, bringing to mind ancient moss-covered stones in a serene, quiet spot.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F6D7A#61818B#8C9D9E#B0C4DE#A9A9A9

Palette guide

How to use Mossy Stone Retreat

Overview

The "Mossy Stone Retreat" palette blends soft, muted greys and blues, reminiscent of ancient moss-covered stones in a serene, quiet spot. This collection, featuring the calming #4F6D7A, the harmonious #61818B, and the airy #B0C4DE, is perfect for designs that aim for tranquility, sophistication, and a gentle connection to nature. Designers can leverage these hex codes to create soothing interfaces that promote calm and contemplation. Developers will find this palette ideal for building applications that require a cool, understated elegance, with #A9A9A9 offering a versatile neutral.

Best used for

  • Meditation and mindfulness apps
  • Spa and wellness brand identities
  • Coastal or serene interior design
  • Sustainable technology platforms
  • Muted nature photography displays
  • Professional services with a calm aesthetic

Suggested color roles

primary

#4F6D7A serves as a stable, cool blue-grey, excellent for main content areas or headers.

secondary

#61818B provides a slightly lighter, complementary tone, suitable for secondary navigation or subheadings.

accent

#B0C4DE offers a soft, ethereal highlight, perfect for subtle interactive elements or visual breathing room.

background

#A9A9A9 creates a versatile, neutral backdrop that allows the cool blues to stand out gently.

text

For light backgrounds like #A9A9A9, #4F6D7A or a dark charcoal ensures readability. For darker elements, white or near-white.

Accessibility notes

  • Ensure #4F6D7A text has sufficient contrast against #A9A9A9 background.
  • Avoid using #8C9D9E text on #A9A9A9 background due to low contrast.
  • All interactive elements should meet WCAG guidelines for color contrast and focus states.
  • Test color combinations under different lighting conditions for optimal readability.

Recommended combinations

Serene Waters

Creates a harmonious, cool gradient, ideal for tranquil backgrounds or header sections.

#4F6D7A · #61818B · #B0C4DE

Stone Calm

A balanced blend of greys and blue-grey, great for clean, minimalist layouts.

#A9A9A9 · #8C9D9E · #4F6D7A

Muted Harmony

A lighter, airy combination for soft interfaces or subtle design elements.

#61818B · #B0C4DE · #A9A9A9

CSS variables

:root {
  --mossy-stone-retreat-1: #4F6D7A;
  --mossy-stone-retreat-2: #61818B;
  --mossy-stone-retreat-3: #8C9D9E;
  --mossy-stone-retreat-4: #B0C4DE;
  --mossy-stone-retreat-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-stone-retreat": {
        1: "#4F6D7A",
        2: "#61818B",
        3: "#8C9D9E",
        4: "#B0C4DE",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

cool grey blue paletteserene nature colorsmuted stone aestheticcalm design colorstranquil blue green grey

Palette colors

Hex values

Color 1#4F6D7A
·
Color 2#61818B
·
Color 3#8C9D9E
·
Color 4#B0C4DE
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3.1:1AA18
2.4:1Fail
2
1.3:1Fail
1.5:1Fail
2.3:1Fail
1.8:1Fail
3
2:1Fail
1.5:1Fail
1.6:1Fail
1.2:1Fail
4
3.1:1AA18
2.3:1Fail
1.6:1Fail
1.3:1Fail
5
2.4:1Fail
1.8:1Fail
1.2:1Fail
1.3:1Fail

Similar palettes

More like Mossy Stone Retreat

View all cool
Agate Grotto
Alpine Lake Serene
Coastal Seafoam Whisper
Coastal Seaglass Shimmer
Enchanted Forest Stream
Hushed Alpine Lake