Back to palettes

Palette

Stone Garden Zen

Muted, cool tones reflecting natural stones and pebbles, creating a serene and balanced aesthetic.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#C0C0C0#778899#5F9EA0#696969

Palette guide

How to use Stone Garden Zen

Overview

The Stone Garden Zen palette features muted, cool tones reflecting natural stones and pebbles, creating a serene and balanced aesthetic. This collection blends classic grays like #A9A9A9, #C0C0C0, and #696969 with a touch of blue-gray in #778899 and a calming teal-gray in #5F9EA0, offering unique depth. It's perfect for designers and developers aiming to create peaceful, minimalist, and contemplative digital or print experiences. Ideal for projects related to wellness, spiritual practices, or sophisticated interior design. The harmonious mix of cool grays and subtle blues ensures versatility, allowing for both grounding stability and refreshing accents.

Best used for

  • Zen meditation app interfaces
  • Minimalist interior design websites
  • Wellness and spa branding
  • Nature-inspired product packaging
  • Yoga studio marketing materials
  • Digital art with a serene theme

Suggested color roles

primary

#778899 - A soft, muted slate blue-gray that provides a calming and stable foundation for main content blocks or primary brand elements.

secondary

#A9A9A9 - A balanced mid-gray that complements the primary, offering gentle contrast for subheadings, borders, or secondary information.

accent

#5F9EA0 - A subtle teal-gray that introduces a refreshing, natural accent. Ideal for calls to action, important icons, or subtle highlights.

background

#C0C0C0 - A light, neutral gray that creates a clean, expansive, and subtle background for pages and content areas, promoting serenity.

text

#696969 - This deep gray offers excellent readability against lighter grays like #C0C0C0 or #A9A9A9, providing a soft yet clear and professional text color.

Accessibility notes

  • Ensure sufficient contrast when using #A9A9A9 for text on #C0C0C0; darker grays are necessary for readability.
  • Pair darker shades like #696969 or #778899 with #C0C0C0 or #A9A9A9 for optimal text readability.
  • For interactive elements, clearly differentiate states (e.g., hover, active) using distinct shades from the palette to enhance usability.
  • Be mindful of contrast ratios for small text and icons, especially when using light grays, to ensure legibility for all users.

Recommended combinations

Zen Balance

Use #778899 for grounding headers, #C0C0C0 as a clean background, and #5F9EA0 for a refreshing accent in buttons or links.

#778899 · #C0C0C0 · #5F9EA0

Stone Layers

Combine #A9A9A9 for main sections, #696969 for primary text, and #778899 for supporting elements or borders, building depth.

#A9A9A9 · #696969 · #778899

Pebble Contrast

Apply #5F9EA0 for a dominant visual element, #696969 for impactful text, and #A9A9A9 for spacious background areas, creating a soft contrast.

#5F9EA0 · #696969 · #A9A9A9

CSS variables

:root {
  --stone-garden-zen-2-1: #A9A9A9;
  --stone-garden-zen-2-2: #C0C0C0;
  --stone-garden-zen-2-3: #778899;
  --stone-garden-zen-2-4: #5F9EA0;
  --stone-garden-zen-2-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-garden-zen-2": {
        1: "#A9A9A9",
        2: "#C0C0C0",
        3: "#778899",
        4: "#5F9EA0",
        5: "#696969",
      }
    }
  }
}

Related searches

zen gray blue palettecalm stone colorsminimalist cool tonesserene neutral schemebalanced design palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#C0C0C0
·
Color 3#778899
·
Color 4#5F9EA0
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.5:1Fail
1.3:1Fail
2.3:1Fail
2
1.3:1Fail
2:1Fail
1.7:1Fail
3:1AA18
3
1.5:1Fail
2:1Fail
1.2:1Fail
1.5:1Fail
4
1.3:1Fail
1.7:1Fail
1.2:1Fail
1.8:1Fail
5
2.3:1Fail
3:1AA18
1.5:1Fail
1.8:1Fail

Similar palettes

More like Stone Garden Zen

View all neutral
Calm Stone Pathway
Smooth Pebble Gradient
Tranquil Pebble Path
Zen Pebble Garden
Zen Sandstone Calm
Minimalist Zen Calm