Back to palettes

Palette

Zen Garden Stone

A tranquil blend of grays and off-whites, inspired by the quiet simplicity of a Japanese rock garden.

monochromecalm5 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

#A9A9A9#708090#D3D3D3#F0F8FF#696969

Palette guide

How to use Zen Garden Stone

Overview

The Zen Garden Stone palette (ID: zen-garden-stone-3) offers a tranquil and refined blend of grays and soft off-whites, inspired by the quiet simplicity of a Japanese rock garden. This palette spans from the almost ethereal #F0F8FF to the grounding #696969, with the versatile #708090 providing a cool, stable mid-tone. Designers will find this collection perfect for creating minimalist interfaces that exude calm and clarity. Developers can leverage these precise hex codes to ensure consistent visual harmony, crafting digital environments that feel both elegant and accessible, ideal for applications where peace and understated sophistication are paramount.

Best used for

  • Mindfulness apps and meditation guides
  • Minimalist interior design websites
  • Luxury brand digital interfaces
  • Art and photography portfolios
  • Professional services with a serene aesthetic
  • Educational platforms for calm subjects

Suggested color roles

primary

#708090 - A cool, balanced grey, excellent for main content blocks, headings, or primary navigation, providing a stable foundation.

secondary

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

accent

#696969 - A deep, rich grey, used sparingly for critical interactive elements, strong focus points, or important icons, ensuring high impact.

background

#F0F8FF - A very light, almost white, cool blue-grey, providing an expansive, clean, and refreshing canvas.

text

#696969 - The darkest shade offers excellent contrast for primary body text against lighter backgrounds, ensuring optimal readability.

Accessibility notes

  • #696969 text on #F0F8FF provides strong contrast, suitable for all body text.
  • Avoid using #A9A9A9 or #D3D3D3 for body text on #F0F8FF backgrounds due to insufficient contrast.
  • Ensure interactive elements, especially those using lighter shades, have clear visual cues for states like hover or focus.
  • Always verify WCAG AA compliance for text and interactive element contrasts.

Recommended combinations

Rock & Sand

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

#696969 · #708090 · #F0F8FF

Misty Horizon

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

#A9A9A9 · #D3D3D3 · #F0F8FF

Deep Contemplation

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

#708090 · #696969 · #A9A9A9

CSS variables

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

Tailwind config

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

Related searches

calm grey blue palettezen rock garden colorsminimalist neutral uitranquil web design schemesophisticated grey off-white

Palette colors

Hex values

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

Accessibility

Contrast checker

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

Similar palettes

More like Zen Garden Stone

View all monochrome
Gravel Zen Meditations
Contemplative Stone Flow
River Stone Calm
River Stone Meditation
Zen Garden Pebbles
Ancient Ruin Stone