Palette

Stone Garden Meditation

A tranquil arrangement of grey tones, perfect for fostering a calm and contemplative mood in a stone garden.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stone Garden Meditation 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 Stone Garden Meditation.

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

Data visualization

#36454F#696969#A9A9A9#D3D3D3#E8E8E8

Palette guide

How to use Stone Garden Meditation

Overview

The Stone Garden Meditation palette offers a tranquil arrangement of grey tones, perfect for fostering a calm and contemplative mood. Ranging from the deep, grounding charcoal of #36454F to the airy lightness of #E8E8E8, with balanced mid-tones like #696969, #A9A9A9, and #D3D3D3, this collection is ideal for designers and developers seeking a serene, minimalist, and zen-inspired aesthetic. It excels in creating interfaces and branding that promote peace, focus, and understated elegance. The inherent harmony of these grays ensures a timeless and versatile foundation for projects related to mindfulness, interior design, or sophisticated digital experiences.

Best used for

Meditation and mindfulness app design
Zen garden themed websites
Interior design mood boards (minimalist)
Luxury brand identity (understated)
Spa and wellness marketing materials
Digital art promoting calm

Suggested color roles

primary

#696969 - A balanced, versatile gray that provides a stable and calming foundation for main content blocks or primary brand elements.

secondary

#A9A9A9 - A lighter, serene gray that complements the primary, offering gentle contrast for subheadings, borders, or secondary information.

accent

#36454F - A deep, rich charcoal that provides impactful depth and sophisticated contrast. Ideal for calls to action, important icons, or prominent text.

background

#E8E8E8 - A very light, almost white gray that creates a clean, expansive, and subtle background, perfect for pages and content areas.

text

#36454F - This deep charcoal offers excellent readability against lighter grays like #E8E8E8 or #D3D3D3, providing a sharp and professional text color.

Accessibility notes

Ensure sufficient contrast when using #D3D3D3 for text on #E8E8E8; darker grays are necessary for readability.
Pair darker shades like #36454F or #696969 with #E8E8E8 or #D3D3D3 for optimal text readability.
For interactive elements, clearly differentiate states (e.g., hover, active) using distinct shades from the palette to enhance usability.
Be mindful of contrast ratios for small text and icons, as subtle gray differences can impact legibility for some users.

Recommended combinations

Zen Focus

Use #36454F for bold headlines, #E8E8E8 as a pristine background, and #696969 for primary content text, creating a clear and calming hierarchy.

#36454F · #E8E8E8 · #696969

Garden Layers

Combine #696969 for main sections, #A9A9A9 for secondary panels, and #D3D3D3 for subtle borders or dividers, building visual depth.

#696969 · #A9A9A9 · #D3D3D3

Meditation Flow

Apply #A9A9A9 for a dominant background section, #36454F for sharp text or accents, and #E8E8E8 for contrasting elements or spaciousness.

#A9A9A9 · #36454F · #E8E8E8

CSS variables

:root {
  --stone-garden-meditation-1: #36454F;
  --stone-garden-meditation-2: #696969;
  --stone-garden-meditation-3: #A9A9A9;
  --stone-garden-meditation-4: #D3D3D3;
  --stone-garden-meditation-5: #E8E8E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-garden-meditation": {
        1: "#36454F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#E8E8E8",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#696969

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#E8E8E8

Accessibility

Contrast checker

1.8:1Fail

4.2:1AA18

6.6:1AA

8.1:1AAA

1.8:1Fail

2.3:1Fail

3.7:1AA18

4.5:1AA18

4.2:1AA18

2.3:1Fail

1.6:1Fail

1.9:1Fail