Back to palettes

Palette

Monochrome Stone Garden

A subtle and balanced monochromatic palette reflecting the quiet harmony of a zen stone garden.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#708090#A9A9A9#D3D3D3#5A6A78

Palette guide

How to use Monochrome Stone Garden

Overview

The "Monochrome Stone Garden" palette offers a serene and balanced gradient of cool grays, reminiscent of quiet, natural stone. Anchored by the deep, earthy #36454F and the slightly warmer #5A6A78, it transitions through tranquil mid-tones like #708090 and #A9A9A9, culminating in the soft, near-white #D3D3D3. This palette is ideal for creating a sense of calm and sophistication in digital and print designs. Designers can use it to build minimalist interfaces, elegant branding, or contemplative art, while developers will appreciate its versatility for subtle UI elements, background variations, and accessible text contrasts.

Best used for

  • Zen-inspired website layouts and meditation apps
  • Eco-friendly or sustainable brand identities
  • Architectural visualization and interior design mockups
  • Photography websites, especially landscapes
  • High-end product packaging with a natural feel
  • Minimalist portfolio sites

Suggested color roles

primary

#36454F - A deep, anchoring gray for main backgrounds, headers, or robust structural elements, providing a solid foundation.

secondary

#5A6A78 - Excellent for secondary sections, navigation bars, or large content panels, offering a slightly lighter, cohesive tone.

accent

#A9A9A9 - Use for subtle highlights, interactive states, or borders that need gentle emphasis without breaking the calm aesthetic.

background

#D3D3D3 - A soft, light background that provides a clean, airy canvas, allowing darker text to stand out clearly.

text

#36454F - A strong, dark gray for primary body text against lighter backgrounds like #D3D3D3, ensuring excellent readability. Alternatively, use black for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background; #36454F on #D3D3D3 offers good readability.
  • Avoid using #708090 for small text on #A9A9A9 backgrounds as contrast might be insufficient.
  • For UI elements, differentiate interactive states clearly, perhaps by using #D3D3D3 for hover on a darker button.
  • Consider larger font sizes for lighter text on mid-tone backgrounds, like #A9A9A9 on #708090.

Recommended combinations

Zen Base

A balanced dark text on light background with a calming mid-tone accent for UI.

#36454F · #D3D3D3 · #708090

Earthy Depth

Creating subtle visual layers for sectioning content or card backgrounds.

#36454F · #5A6A78 · #A9A9A9

Light & Airy

For a soft, spacious feel, with the darkest shade providing gentle contrast.

#D3D3D3 · #A9A9A9 · #708090

CSS variables

:root {
  --monochrome-stone-garden-1: #36454F;
  --monochrome-stone-garden-2: #708090;
  --monochrome-stone-garden-3: #A9A9A9;
  --monochrome-stone-garden-4: #D3D3D3;
  --monochrome-stone-garden-5: #5A6A78;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-stone-garden": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#5A6A78",
      }
    }
  }
}

Related searches

zen color palettecool gray schememinimalist stone colorscalm monochromatic designnatural grey branding

Palette colors

Hex values

Color 1#36454F
·
Color 2#708090
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#5A6A78
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
4.2:1AA18
6.6:1AA
1.8:1Fail
2
2.4:1Fail
1.7:1Fail
2.7:1Fail
1.4:1Fail
3
4.2:1AA18
1.7:1Fail
1.6:1Fail
2.4:1Fail
4
6.6:1AA
2.7:1Fail
1.6:1Fail
3.7:1AA18
5
1.8:1Fail
1.4:1Fail
2.4:1Fail
3.7:1AA18

Similar palettes

More like Monochrome Stone Garden

View all monochrome
Basalt Stream Pebble
Minimalist Stone Garden
Zen Garden Stone
Beach Stone Sketch
Calm Stone Meditate
Frosty Serene