Back to palettes

Palette

Zen Stone Garden

A tranquil blend inspired by the harmonious simplicity and natural textures of a Japanese rock garden.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#4F4F4F#F5F5F5#A3B5A1#778899

Palette guide

How to use Zen Stone Garden

Overview

The Zen Stone Garden palette offers a tranquil and minimalist aesthetic, perfect for evoking calm and understated elegance. This blend of soft grays and muted greens, including light neutral #D3D3D3, deep charcoal #4F4F4F, and a serene light mint #A3B5A1, creates a harmonious natural feel. Designers can leverage the near-white #F5F5F5 for clean backgrounds and the cool slate #778899 for subtle depth. It's ideal for projects that require a sophisticated yet soothing visual experience, reflecting the quiet beauty of natural stone and subtle foliage. This palette promotes focus and a sense of grounded tranquility.

Best used for

  • Spa and wellness brand identities
  • Minimalist website designs
  • Interior design concepts (calm spaces)
  • Eco-friendly product packaging
  • Yoga studio branding
  • Digital art with a serene theme

Suggested color roles

primary

Use #4F4F4F for strong headings or main interactive elements, providing a grounded anchor.

secondary

Apply #778899 for sub-headings, borders, or secondary calls to action, offering a cool, stable presence.

accent

#A3B5A1 works beautifully for subtle highlights, interactive states, or small decorative elements, adding a touch of natural calm.

background

#F5F5F5 provides a clean, airy canvas, ensuring excellent readability and a spacious feel.

text

For dark text on light backgrounds, #4F4F4F offers strong contrast. For light text on darker elements, consider a near-white like #F5F5F5.

Accessibility notes

  • Ensure #4F4F4F text has sufficient contrast against #F5F5F5 or #D3D3D3 backgrounds (WCAG AA).
  • Be mindful of #A3B5A1's contrast when used for text against lighter backgrounds; it's best for accents.
  • Use #778899 for larger text or as a background for lighter text, checking contrast ratios.
  • Avoid using #D3D3D3 as text on #F5F5F5 without significant size or weight to pass contrast.

Recommended combinations

Stone & Moss

Excellent for header, body text, and a subtle button highlight on a clean layout.

#4F4F4F · #D3D3D3 · #A3B5A1

Pathway Serenity

Ideal for a light background, secondary UI elements, and strong primary text/icons.

#F5F5F5 · #778899 · #4F4F4F

Gentle Contrast

A soft, layered look suitable for subtle gradients, dividers, and mild emphasis.

#D3D3D3 · #A3B5A1 · #778899

CSS variables

:root {
  --zen-stone-garden-9-1: #D3D3D3;
  --zen-stone-garden-9-2: #4F4F4F;
  --zen-stone-garden-9-3: #F5F5F5;
  --zen-stone-garden-9-4: #A3B5A1;
  --zen-stone-garden-9-5: #778899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-garden-9": {
        1: "#D3D3D3",
        2: "#4F4F4F",
        3: "#F5F5F5",
        4: "#A3B5A1",
        5: "#778899",
      }
    }
  }
}

Related searches

minimalist color schemestranquil gray green palettecalm nature inspired colorspeaceful stone garden designmuted earth tone palette

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#4F4F4F
·
Color 3#F5F5F5
·
Color 4#A3B5A1
·
Color 5#778899
·

Accessibility

Contrast checker

1
2
3
4
5
1
5.5:1AA
1.4:1Fail
1.4:1Fail
2.4:1Fail
2
5.5:1AA
7.5:1AAA
3.8:1AA18
2.2:1Fail
3
1.4:1Fail
7.5:1AAA
2:1Fail
3.3:1AA18
4
1.4:1Fail
3.8:1AA18
2:1Fail
1.7:1Fail
5
2.4:1Fail
2.2:1Fail
3.3:1AA18
1.7:1Fail

Similar palettes

More like Zen Stone Garden

View all monochrome
Zen Rock Garden
Art Gallery Minimal
Minimalist Ink Wash
Zen Garden Stone
Zen Sand Garden
Zen Stone Garden