Back to palettes

Palette

Zen Stone Garden

A serene, calming spectrum of muted greys, evoking the peaceful stillness of a Japanese Zen 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

#4A4A4A#6D6D6D#919191#B4B4B4#D8D8D8

Palette guide

How to use Zen Stone Garden

Overview

The Zen Stone Garden palette offers a serene, calming spectrum of muted greys, evoking the peaceful stillness of a Japanese Zen garden. Ranging from the deep #4A4A4A to the light #D8D8D8, including #6D6D6D, #919191, and #B4B4B4, this monochrome collection provides designers and developers a sophisticated and minimalist foundation. It's ideal for creating interfaces and branding that prioritize clarity, focus, and a sense of quiet professionalism. The harmonious progression of shades allows for elegant hierarchy and depth, making it perfect for projects that aim for a refined, contemporary, and unobtrusive aesthetic across digital and print mediums.

Best used for

  • Elegant corporate branding and websites
  • High-end product design showcases
  • User interface (UI) for creative tools
  • Photography portfolios and art websites
  • Modern art gallery displays and catalogs
  • Minimalist fashion or jewelry brand identities

Suggested color roles

primary

Use #6D6D6D as a solid, versatile dark grey for main content blocks, establishing a strong presence.

secondary

Employ #919191 as a mid-tone supportive grey for secondary information, borders, or subtle background variations.

accent

Apply #4A4A4A as the deepest grey for strong emphasis, primary text, or interactive elements, ensuring clarity.

background

Utilize #D8D8D8 as the lightest, clean, and bright base, providing an expansive and calm canvas.

text

For body text, use #4A4A4A on #D8D8D8 for excellent contrast, or a true black for maximum legibility on lighter shades.

Accessibility notes

  • Ensure #4A4A4A text on #D8D8D8 background meets WCAG AA contrast ratios for optimal readability.
  • #6D6D6D also provides good contrast for headings or larger text on #D8D8D8, enhancing visual hierarchy.
  • Avoid using #B4B4B4 or #919191 for small text on #D8D8D8 due to potentially insufficient contrast.
  • For critical information, using black text on the lightest background (#D8D8D8) will offer maximum readability.

Recommended combinations

Strong Contrast

Creates a clear, readable design for primary content, blending a light background with strong dark and mid-tone greys.

#D8D8D8 · #4A4A4A · #6D6D6D

Gradual Depth

Achieves subtle transitions for backgrounds, dividers, or subtle UI elements, promoting a sense of calm continuity.

#D8D8D8 · #B4B4B4 · #919191

Dark & Light Balance

A solid base with strong text and a light highlight, ideal for professional and modern aesthetics with clear definition.

#6D6D6D · #4A4A4A · #D8D8D8

CSS variables

:root {
  --zen-stone-garden-6-1: #4A4A4A;
  --zen-stone-garden-6-2: #6D6D6D;
  --zen-stone-garden-6-3: #919191;
  --zen-stone-garden-6-4: #B4B4B4;
  --zen-stone-garden-6-5: #D8D8D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-stone-garden-6": {
        1: "#4A4A4A",
        2: "#6D6D6D",
        3: "#919191",
        4: "#B4B4B4",
        5: "#D8D8D8",
      }
    }
  }
}

Related searches

monochrome grey designminimalist zen palettesophisticated dark greyscalm professional UI colorsmodern grey aesthetic

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#6D6D6D
·
Color 3#919191
·
Color 4#B4B4B4
·
Color 5#D8D8D8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.3:1AA18
6.2:1AA
2
1.7:1Fail
1.6:1Fail
2.5:1Fail
3.6:1AA18
3
2.8:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
4.3:1AA18
2.5:1Fail
1.5:1Fail
1.5:1Fail
5
6.2:1AA
3.6:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Zen Stone Garden

View all monochrome
Zen Garden Rake
Calm Stone Meditate
Stone Garden Meditation
Zen Meditation Stone
Zen Pebble Serenity
Zen Sand Garden