Palette

Mindful Stone Serenity

A simple and soothing palette, inspired by the peaceful arrangement of stones in a tranquil zen garden, promoting calm.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mindful Stone Serenity 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 Mindful Stone Serenity.

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

Data visualization

#808080#F5F5DC#A2AC8E#36454F#F8F8F8

Palette guide

How to use Mindful Stone Serenity

Overview

The Mindful Stone Serenity palette is a simple and soothing collection, inspired by the peaceful arrangement of stones in a tranquil zen garden. It features a range of calming neutrals, from the deep charcoal #36454F to the crisp near-white #F8F8F8. Muted tones like #808080 (medium gray) and #A2AC8E (sage green-gray) add natural depth and an organic feel. The creamy #F5F5DC provides a soft, warm off-white. This palette is ideal for designers and developers seeking to create minimalist, calm, and sophisticated experiences. It's perfect for wellness apps, eco-friendly branding, and serene digital environments.

Best used for

Wellness and meditation applications
Minimalist architecture portfolios
Eco-friendly product branding
Spa and retreat websites
Serene interior design concepts
Zen garden-inspired digital art

Suggested color roles

primary

Use #36454F as the dominant dark color for text, primary elements, or deep backgrounds, providing strong contrast.

secondary

Employ #A2AC8E for supporting elements, subtle accents, or visual interest that maintains a natural, muted feel.

accent

Apply #808080 for subtle highlights, secondary text, or UI elements that require gentle emphasis without being stark.

background

Utilize #F8F8F8 as a clean, crisp near-white background, providing an airy and minimalist canvas.

text

Use #36454F for all primary text to ensure optimal readability. #808080 can be used for secondary or less critical text.

Accessibility notes

#36454F provides excellent contrast for text on #F8F8F8 and #F5F5DC, ensuring high readability.
#A2AC8E might have insufficient contrast with #F5F5DC for small text; verify WCAG AA standards for readability.
Use #808080 for secondary text or subtle UI elements on light backgrounds, but always check contrast for small sizes.
Ensure interactive elements are clearly distinguishable even if their color is muted, using focus states and hover effects.

Recommended combinations

Zen Foundation

Ideal for main content areas, headings, and supporting elements, creating a clean, calm, and highly readable design.

#F8F8F8 · #36454F · #A2AC8E

Stone Layers

Excellent for background textures, subtle dividers, or layered visual effects that evoke natural stone formations.

#F5F5DC · #A2AC8E · #808080

Grounded Accent

Perfect for call-to-action buttons, important information, or navigational elements for a sophisticated, understated touch.

#36454F · #808080 · #F8F8F8

CSS variables

:root {
  --mindful-stone-serenity-1: #808080;
  --mindful-stone-serenity-2: #F5F5DC;
  --mindful-stone-serenity-3: #A2AC8E;
  --mindful-stone-serenity-4: #36454F;
  --mindful-stone-serenity-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mindful-stone-serenity": {
        1: "#808080",
        2: "#F5F5DC",
        3: "#A2AC8E",
        4: "#36454F",
        5: "#F8F8F8",
      }
    }
  }
}

Hex values

Color 1#808080

Color 2#F5F5DC

Color 3#A2AC8E

Color 4#36454F

Color 5#F8F8F8

Accessibility

Contrast checker

3.6:1AA18

1.7:1Fail

2.5:1Fail

3.7:1AA18

3.6:1AA18

2.1:1Fail

8.9:1AAA

1:1Fail

1.7:1Fail

2.1:1Fail

4.2:1AA18

2.2:1Fail

2.5:1Fail

8.9:1AAA

4.2:1AA18

9.3:1AAA

3.7:1AA18

1:1Fail

2.2:1Fail

9.3:1AAA

Similar palettes

More like Mindful Stone Serenity