Back to palettes

Palette

Zen Garden Stone

A soothing monochromatic palette inspired by the tranquil arrangements of a Japanese rock 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

#36454F#54626F#78828A#A6AEB3#D0D4D6

Palette guide

How to use Zen Garden Stone

Overview

The Zen Garden Stone palette (ID: zen-garden-stone-2) offers a sophisticated monochromatic journey through deep, cool grays, mirroring the serene arrangements of a Japanese rock garden. Ranging from the profound #36454F to the airy #D0D4D6, this palette provides a strong foundation for minimalist design. Designers can utilize the subtle transitions between shades like #54626F and #78828A to establish clear visual hierarchy and depth without relying on additional colors. Developers will find these precise hex codes ideal for creating consistent, calm, and professional interfaces that evoke a sense of grounding stillness and modern elegance.

Best used for

  • High-end corporate websites
  • Modern architectural portfolios
  • Luxury product showcases
  • Minimalist tech interfaces
  • Professional service platforms
  • Digital art galleries with a stark aesthetic

Suggested color roles

primary

#54626F - A deep, cool grey, excellent for main content blocks, prominent headings, or primary navigation, providing a strong anchor.

secondary

#78828A - A versatile mid-grey, ideal for secondary information, borders, or subtle background patterns, adding visual texture.

accent

#36454F - The darkest shade, used sparingly for critical interactive elements, strong focus points, or important icons, ensuring high impact.

background

#D0D4D6 - A very light, almost white, cool grey, providing a clean, spacious, and calming canvas.

text

#36454F - The deepest shade offers excellent contrast for primary body text against lighter backgrounds, ensuring optimal readability.

Accessibility notes

  • #36454F text on #D0D4D6 provides strong contrast, suitable for all body text.
  • Avoid using #A6AEB3 for text on #D0D4D6 backgrounds due to insufficient contrast.
  • Ensure interactive elements, especially those using lighter shades, have clear visual cues for states like hover or focus.
  • For extensive content, consider using a high-contrast pairing of dark text on light background.

Recommended combinations

Deep Slate

High-contrast for headers, footers, or prominent structural elements.

#36454F · #54626F · #D0D4D6

Pebble Path

Soft, layered look for content cards, panels, or secondary information.

#78828A · #A6AEB3 · #D0D4D6

Shadowed Stone

Creates depth and emphasis for interactive elements or strong visual hierarchy.

#54626F · #78828A · #36454F

CSS variables

:root {
  --zen-garden-stone-2-1: #36454F;
  --zen-garden-stone-2-2: #54626F;
  --zen-garden-stone-2-3: #78828A;
  --zen-garden-stone-2-4: #A6AEB3;
  --zen-garden-stone-2-5: #D0D4D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-stone-2": {
        1: "#36454F",
        2: "#54626F",
        3: "#78828A",
        4: "#A6AEB3",
        5: "#D0D4D6",
      }
    }
  }
}

Related searches

monochromatic stone palettecool grey ui designzen minimalist greysophisticated rock garden colorscalm professional palette

Palette colors

Hex values

Color 1#36454F
·
Color 2#54626F
·
Color 3#78828A
·
Color 4#A6AEB3
·
Color 5#D0D4D6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
4.4:1AA18
6.6:1AA
2
1.6:1Fail
1.6:1Fail
2.8:1Fail
4.2:1AA18
3
2.5:1Fail
1.6:1Fail
1.7:1Fail
2.6:1Fail
4
4.4:1AA18
2.8:1Fail
1.7:1Fail
1.5:1Fail
5
6.6:1AA
4.2:1AA18
2.6:1Fail
1.5:1Fail

Similar palettes

More like Zen Garden Stone

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