Palette

Zen Pebble Garden

Tranquil greys and soft whites, inspired by the meticulously raked patterns and smooth stones of a Japanese Zen garden.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A8883#BFC0C2#DDE1E2#F0F2F3#6B778C

Palette guide

How to use Zen Pebble Garden

Overview

The Zen Pebble Garden palette offers tranquil greys and soft whites, inspired by the meticulously raked patterns and smooth stones of a Japanese Zen garden. This minimalist collection, featuring #8A8883, #BFC0C2, #DDE1E2, #F0F2F3, and #6B778C, provides a calming and sophisticated aesthetic. Developers and designers can leverage these cool, neutral shades to create clean web interfaces, elegant interior design concepts, or serene branding that evokes a sense of peace and natural beauty. The subtle variations allow for nuanced depth and a harmonious visual experience, perfect for projects seeking understated elegance and a tranquil atmosphere.

Best used for

Minimalist web design and user interfaces
Interior design concepts for calming spaces
Architectural presentations and visualizations
Serene branding and corporate identity
Sophisticated editorial content and layouts
Wellness and lifestyle platforms

Suggested color roles

primary

Use #6B778C as the main color for strong brand elements, calls to action, or prominent headings, providing a deep, anchoring presence.

secondary

Apply #8A8883 for supporting text, navigation links, or subtle graphic elements, offering a warm, grounding contrast.

accent

Utilize #DDE1E2 for delicate highlights, interactive elements, or soft background textures, adding an airy, clean touch.

background

Employ #F0F2F3 as a very light off-white background, creating a clean, expansive, and airy canvas.

text

For subheadings on darker backgrounds, use #BFC0C2. For main body text on #F0F2F3, a dark charcoal or black is recommended for readability.

Accessibility notes

Ensure #6B778C text on #F0F2F3 background meets WCAG AA standards for optimal readability.
Colors like #BFC0C2 and #DDE1E2 will have insufficient contrast for small text on #F0F2F3; use for large decorative elements.
When using #6B778C as a background, ensure text (e.g., #F0F2F3 or #DDE1E2) has sufficient contrast.
Avoid pairing #8A8883 with #BFC0C2 for body text, as contrast might be too low for comfortable reading.

Recommended combinations

Airy Base

Creates a subtle, light background with gentle depth for clean, modern interfaces and expansive layouts.

#F0F2F3 · #DDE1E2 · #BFC0C2

Pebble Contrast

Use #6B778C for primary content, #8A8883 for secondary, and #DDE1E2 for accents, creating a balanced visual hierarchy.

#6B778C · #8A8883 · #DDE1E2

Zen Depth

Pair #6B778C as primary text on #F0F2F3, with #8A8883 for secondary information, for a sophisticated, readable design.

#F0F2F3 · #6B778C · #8A8883

CSS variables

:root {
  --zen-pebble-garden-2-1: #8A8883;
  --zen-pebble-garden-2-2: #BFC0C2;
  --zen-pebble-garden-2-3: #DDE1E2;
  --zen-pebble-garden-2-4: #F0F2F3;
  --zen-pebble-garden-2-5: #6B778C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-pebble-garden-2": {
        1: "#8A8883",
        2: "#BFC0C2",
        3: "#DDE1E2",
        4: "#F0F2F3",
        5: "#6B778C",
      }
    }
  }
}

Hex values

Color 1#8A8883

Color 2#BFC0C2

Color 3#DDE1E2

Color 4#F0F2F3

Color 5#6B778C

Accessibility

Contrast checker

1.9:1Fail

2.7:1Fail

3.2:1AA18

1.3:1Fail

1.9:1Fail

1.4:1Fail

1.6:1Fail

2.5:1Fail

2.7:1Fail

1.4:1Fail

1.2:1Fail

3.4:1AA18

3.2:1AA18

1.6:1Fail

1.2:1Fail

4:1AA18

1.3:1Fail

2.5:1Fail

3.4:1AA18

4:1AA18

Similar palettes

More like Zen Pebble Garden

Smooth Pebble Gradient

Stone Garden Zen

Tranquil Pebble Path