Back to palettes

Palette

Zen Stone Garden

Subtle gradients of cool grays capture the serene simplicity and meditative calm of a minimalist stone 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

#696969#A9A9A9#D3D3D3#F5F5F5#708090

Palette guide

How to use Zen Stone Garden

Overview

The Zen Stone Garden palette captures the serene simplicity and meditative calm of a minimalist stone garden with subtle gradients of cool grays. This monochrome collection, featuring #696969 (dark grey), #A9A9A9 (mid-grey), #D3D3D3 (light grey), #F5F5F5 (off-white), and #708090 (slate grey), offers designers and developers a sophisticated and modern foundation. It's highly versatile for creating clean, professional, and tranquil interfaces. The cool undertones bring a sense of clarity and focus, making it ideal for projects that prioritize functionality, understated elegance, and a calm user experience.

Best used for

  • Corporate and professional website interfaces
  • Modern architecture and design portfolios
  • High-end electronics brand identity
  • Clean and minimal UI/UX design systems
  • Photography and art exhibition materials
  • Automotive industry marketing and presentations

Suggested color roles

primary

Use #A9A9A9 as a versatile mid-tone cool grey for main elements, providing a balanced and stable presence.

secondary

Employ #D3D3D3 for lighter supporting elements, subtle backgrounds, or dividers, adding softness.

accent

Apply #696969 as a darker grey for strong emphasis, primary text, or interactive elements, ensuring clarity.

background

Utilize #F5F5F5 as the lightest, clean, and airy base, maximizing white space and visual breathability.

text

For body text, use #696969 on lighter backgrounds like #F5F5F5, or #708090 for excellent contrast and a subtle cool tone.

Accessibility notes

  • Ensure #696969 text on #F5F5F5 background provides sufficient contrast for readability (WCAG AA).
  • #708090 (slate grey) offers good contrast against #F5F5F5 for headings or important text.
  • Avoid using #A9A9A9 or #D3D3D3 for small text on #F5F5F5 due to potential contrast issues.
  • For critical body text, consider using black or a very dark charcoal against #F5F5F5 to guarantee compliance.

Recommended combinations

Classic Contrast

A timeless and readable combination for primary content, blending a light background with strong text and a mid-tone.

#F5F5F5 · #696969 · #A9A9A9

Cool Layers

Creates a subtle, layered effect for backgrounds, dividers, or soft UI elements, promoting visual calm.

#F5F5F5 · #D3D3D3 · #A9A9A9

Slate & Stone

Uses the distinct slate grey as a primary color with a light background and dark text, for a modern, cool aesthetic.

#708090 · #F5F5F5 · #696969

CSS variables

:root {
  --zen-stone-garden-4-1: #696969;
  --zen-stone-garden-4-2: #A9A9A9;
  --zen-stone-garden-4-3: #D3D3D3;
  --zen-stone-garden-4-4: #F5F5F5;
  --zen-stone-garden-4-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-garden-4": {
        1: "#696969",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#F5F5F5",
        5: "#708090",
      }
    }
  }
}

Related searches

cool grey minimalist palettemodern neutral color schemezen grey designprofessional grey tonescalming architectural colors

Palette colors

Hex values

Color 1#696969
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#F5F5F5
·
Color 5#708090
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
3.7:1AA18
5:1AA
1.4:1Fail
2
2.3:1Fail
1.6:1Fail
2.2:1Fail
1.7:1Fail
3
3.7:1AA18
1.6:1Fail
1.4:1Fail
2.7:1Fail
4
5:1AA
2.2:1Fail
1.4:1Fail
3.7:1AA18
5
1.4:1Fail
1.7:1Fail
2.7:1Fail
3.7:1AA18

Similar palettes

More like Zen Stone Garden

View all monochrome
Calm Stone Meditate
Minimalist Stone Garden
Stone Garden Meditation
Zen Garden Pebble
Zen Garden Rake
Zen Garden Stone