Palette

Zen Garden Pebbles

Soft, cool greys and off-whites, embodying the tranquil simplicity of a meticulously raked zen garden.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#778899#D3D3D3#F0F0F0#D0DBEE

Palette guide

How to use Zen Garden Pebbles

Overview

The Zen Garden Pebbles palette presents soft, cool greys and off-whites with a subtle blue hint, embodying the tranquil simplicity of a meticulously raked zen garden. Ranging from the airy #F0F0F0 to the medium-dark #778899, this collection creates an invitingly calm and minimalist aesthetic. Developers and designers can leverage #A9A9A9 as a balanced primary color, while #D3D3D3 offers a light, supportive backdrop. This palette is ideal for projects that aim to evoke serenity, clarity, and a refreshing sense of space, perfect for wellness or cloud-based services.

Best used for

Wellness and meditation application interfaces
Cloud service platforms and SaaS dashboards
Minimalist portfolios and creative agency websites
Serene lifestyle brands and e-commerce sites
Educational platforms requiring a calm, focused environment
Modern home decor and interior design visuals

Suggested color roles

primary

Utilize #A9A9A9 for main navigation, active states, or prominent graphical elements, offering a balanced and neutral presence.

secondary

Apply #D3D3D3 for supporting information, subheadings, or secondary buttons, providing a softer, unobtrusive contrast.

accent

Incorporate #778899 for cool, grounding accents, progress indicators, or icons that need a touch more depth and sophistication.

background

The lightest shade, #F0F0F0, creates a clean, expansive off-white canvas, enhancing content visibility.

text

The cool blue-gray #778899 offers good contrast for body text and critical information, ensuring clear readability against lighter backgrounds.

Accessibility notes

Ensure #778899 text on #F0F0F0 backgrounds meets WCAG AA contrast standards for optimal legibility.
Be cautious when using #A9A9A9 for small text on #F0F0F0, as contrast might be borderline for smaller fonts.
Always test interactive elements to ensure they are easily distinguishable.
For very small or fine print, consider a darker charcoal or black if #778899 doesn't provide enough contrast on the lightest shades.

Recommended combinations

Airy & Calm

Ideal for main content areas: light background, balanced headings, legible cool-gray text.

#F0F0F0 · #A9A9A9 · #778899

Subtle Blue Hint

Create gentle visual interest and a refreshing feel for secondary content blocks.

#D3D3D3 · #D0DBEE · #A9A9A9

Cool Contrast

Highlight key information with a dominant mid-tone, dark text, and a light surrounding element.

#A9A9A9 · #778899 · #F0F0F0

CSS variables

:root {
  --zen-garden-pebbles-1: #A9A9A9;
  --zen-garden-pebbles-2: #778899;
  --zen-garden-pebbles-3: #D3D3D3;
  --zen-garden-pebbles-4: #F0F0F0;
  --zen-garden-pebbles-5: #D0DBEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-pebbles": {
        1: "#A9A9A9",
        2: "#778899",
        3: "#D3D3D3",
        4: "#F0F0F0",
        5: "#D0DBEE",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#778899

Color 3#D3D3D3

Color 4#F0F0F0

Color 5#D0DBEE

Accessibility

Contrast checker

1.5:1Fail

1.6:1Fail

2.1:1Fail

1.7:1Fail

1.5:1Fail

2.4:1Fail

3.2:1AA18

2.6:1Fail

1.6:1Fail

2.4:1Fail

1.3:1Fail

1.1:1Fail

2.1:1Fail

3.2:1AA18

1.3:1Fail

1.2:1Fail

1.7:1Fail

2.6:1Fail

1.1:1Fail

1.2:1Fail

Similar palettes

More like Zen Garden Pebbles

View all monochrome

Contemplative Stone Flow

River Stone Calm

River Stone Meditation

Gravel Zen Meditations

Stone Garden

Grey Cloud Cascade