Back to palettes

Palette

Zen Garden Stone

A tranquil gradient of cool greys reflects the meditative simplicity of raked gravel and quiet stones in a zen garden.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A5A5A#8C8C8C#B3B3B3#3D3D3D#222222

Palette guide

How to use Zen Garden Stone

Overview

The Zen Garden Stone palette offers a tranquil gradient of cool greys, ideal for projects seeking a meditative, minimalist aesthetic. Inspired by raked gravel and quiet stones, this monochrome collection provides a sophisticated foundation for design. Key colors include the grounding #5A5A5A, the versatile mid-tone #8C8C8C, and the deep, anchoring #222222. Designers and developers can leverage these shades to create serene user interfaces, elegant branding, or sophisticated content layouts. The palette's subtle variations, from the lightest #B3B3B3 to the darkest #222222, allow for nuanced depth and a sense of calm sophistication, making it perfect for conveying peace and refined simplicity.

Best used for

  • Minimalist UI design for apps and websites
  • Luxury branding and corporate identity
  • Photography portfolios and art galleries
  • Architectural visualization and presentations
  • Wellness and meditation platform design
  • High-end product packaging

Suggested color roles

primary

Use #5A5A5A as the main color for headings, primary buttons, or significant UI elements, providing a solid yet understated presence.

secondary

Apply #8C8C8C for secondary information, subheadings, borders, or inactive states to offer subtle differentiation without harsh contrast.

accent

Utilize #B3B3B3 for delicate highlights, subtle hover effects, or as a background for light text on dark layouts, adding a touch of brightness.

background

Employ #222222 for deep, immersive backgrounds, creating a luxurious and contemplative space that allows lighter elements to truly stand out.

text

For primary text on light backgrounds, use #3D3D3D. On darker backgrounds like #222222, use #B3B3B3 or a pure white for optimal readability.

Accessibility notes

  • Ensure sufficient contrast between #222222 background and lighter text colors like #B3B3B3 for WCAG AA compliance.
  • Text in #3D3D3D on a #B3B3B3 background will likely require careful checking for accessibility standards.
  • Avoid using #8C8C8C for small text against #5A5A5A as the contrast may be insufficient for readability.
  • When using dark backgrounds, always verify that foreground elements and text have adequate luminance contrast.

Recommended combinations

Deep Foundation

Creates a strong, sophisticated base for hero sections or dark mode interfaces, with layered greys offering subtle depth.

#222222 · #3D3D3D · #5A5A5A

Clean UI Elements

Ideal for card components, navigation bars, and interactive elements, providing a clear visual hierarchy.

#B3B3B3 · #8C8C8C · #5A5A5A

High Contrast Read

Pair #B3B3B3 text on a #222222 background, with #5A5A5A for headings, ensuring excellent readability in dark themes.

#222222 · #B3B3B3 · #5A5A5A

CSS variables

:root {
  --zen-garden-stone-1: #5A5A5A;
  --zen-garden-stone-2: #8C8C8C;
  --zen-garden-stone-3: #B3B3B3;
  --zen-garden-stone-4: #3D3D3D;
  --zen-garden-stone-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-stone": {
        1: "#5A5A5A",
        2: "#8C8C8C",
        3: "#B3B3B3",
        4: "#3D3D3D",
        5: "#222222",
      }
    }
  }
}

Related searches

monochrome grey paletteminimalist stone colorszen UI design palettedark grey aestheticcalm neutral color scheme

Palette colors

Hex values

Color 1#5A5A5A
·
Color 2#8C8C8C
·
Color 3#B3B3B3
·
Color 4#3D3D3D
·
Color 5#222222
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.3:1AA18
1.6:1Fail
2.3:1Fail
2
2.1:1Fail
1.6:1Fail
3.2:1AA18
4.7:1AA
3
3.3:1AA18
1.6:1Fail
5.2:1AA
7.6:1AAA
4
1.6:1Fail
3.2:1AA18
5.2:1AA
1.5:1Fail
5
2.3:1Fail
4.7:1AA
7.6:1AAA
1.5:1Fail

Similar palettes

More like Zen Garden Stone

View all monochrome
Calm Stone Meditate
Quiet Pebble Stream
Tranquil Stone Path
Zen Garden Pebble
Zen Garden Stone
Zen Pebble Serenity