Back to palettes

Palette

Zen Stone Garden

A calming, monochrome collection reflecting the tranquil harmony of a minimalist Zen garden with its raked gravel and stones.

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

#D0D0D0#B0B0B0#909090#707070#505050

Palette guide

How to use Zen Stone Garden

Overview

The Zen Stone Garden palette is a calming, monochrome collection reflecting the tranquil harmony of a minimalist Zen garden. With a spectrum of greys from the light #D0D0D0 to the deep #505050, including #B0B0B0, #909090, and #707070, it offers designers and developers a sophisticated foundation for creating clean, modern, and serene interfaces. This palette is inherently versatile, allowing for subtle gradients and clear hierarchical structures without relying on vibrant hues. It's perfect for projects where a sense of understated elegance, focus, and quiet professionalism is desired, fostering a meditative and clutter-free user experience.

Best used for

  • High-tech corporate and professional branding
  • User interface (UI) design for productivity applications
  • Architectural and design portfolio websites
  • Modern art gallery displays and branding
  • Minimalist fashion or jewelry brand identities
  • Data visualization and dashboard design

Suggested color roles

primary

Use #909090 as a balanced, versatile mid-grey for main content blocks, providing stability and clarity.

secondary

Employ #B0B0B0 for supportive elements, subtle dividers, or backgrounds that require a slightly lighter tone.

accent

Apply #505050 as the darkest grey for strong emphasis, calls-to-action, or primary text elements.

background

Utilize #D0D0D0 as the lightest shade for clean, expansive backgrounds, ensuring ample breathing room.

text

For body text, use #505050 on #D0D0D0 for excellent contrast, or a true black for maximum legibility on lighter shades.

Accessibility notes

  • Ensure #505050 text on #D0D0D0 background meets WCAG AA contrast ratios for optimal readability.
  • Use #707070 for headings or larger text on #D0D0D0, as it provides better contrast than lighter greys.
  • Avoid placing #B0B0B0 text directly on #909090 for critical information due to potentially insufficient contrast.
  • For small, essential text, consider using black against the lightest shades to guarantee accessibility compliance.

Recommended combinations

High Contrast Read

Provides clear hierarchy and strong readability for primary content, blending light background with dark text.

#D0D0D0 · #505050 · #707070

Subtle Depth

Creates soft transitions and layered backgrounds, ideal for subtle UI elements or visual depth.

#D0D0D0 · #B0B0B0 · #909090

Bold Statement

A robust base with strong textual presence, complemented by a light background for emphasis and clarity.

#707070 · #505050 · #D0D0D0

CSS variables

:root {
  --zen-stone-garden-10-1: #D0D0D0;
  --zen-stone-garden-10-2: #B0B0B0;
  --zen-stone-garden-10-3: #909090;
  --zen-stone-garden-10-4: #707070;
  --zen-stone-garden-10-5: #505050;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-garden-10": {
        1: "#D0D0D0",
        2: "#B0B0B0",
        3: "#909090",
        4: "#707070",
        5: "#505050",
      }
    }
  }
}

Related searches

monochrome grey paletteminimalist UI colorsmodern neutral brandingsophisticated grey schemescalm professional colors

Palette colors

Hex values

Color 1#D0D0D0
·
Color 2#B0B0B0
·
Color 3#909090
·
Color 4#707070
·
Color 5#505050
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.2:1AA18
5.2:1AA
2
1.4:1Fail
1.5:1Fail
2.3:1Fail
3.7:1AA18
3
2.1:1Fail
1.5:1Fail
1.6:1Fail
2.5:1Fail
4
3.2:1AA18
2.3:1Fail
1.6:1Fail
1.6:1Fail
5
5.2:1AA
3.7:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Zen Stone Garden

View all monochrome
Zen Stone Lantern
Calm Stone Meditate
Minimalist Stone Garden
Zen Garden Stone
Zen Pebble Serenity
Zen Rock Garden