Palette

Pebble Zen Garden

Serene greys and soft beiges arrange themselves in quiet harmony, like a carefully raked Japanese pebble garden.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5D6D5D#8A9B8A#B3C1B3#D9DED9#F0F3F0

Palette guide

How to use Pebble Zen Garden

Overview

The Pebble Zen Garden palette offers a deeply calming and harmonious collection of muted greens and soft grays, mirroring the serene aesthetic of a meticulously raked Japanese garden. With a grounding primary shade like `#5D6D5D` and delicate highlights such as `#F0F3F0`, this palette is perfect for designers and developers crafting tranquil and minimalist digital spaces. The mid-tones, including `#8A9B8A` and `#B3C1B3`, provide gentle transitions and depth, ensuring an inviting yet unobtrusive user experience. This collection promotes a sense of balance and natural elegance, making it ideal for projects that prioritize peace and clear focus.

Best used for

Wellness and meditation apps
Eco-friendly brand identities
Minimalist website designs
Nature-themed digital art
Spa and retreat branding
Content platforms focused on calm or mindfulness

Suggested color roles

primary

Use `#5D6D5D` for main headings, navigation bars, or significant content blocks to establish a strong, calming base.

secondary

Employ `#8A9B8A` for subheadings, dividers, or background sections that require a softer presence.

accent

Apply `#B3C1B3` as a subtle accent for hover states, progress indicators, or small icons, maintaining the serene mood.

background

Utilize `#F0F3F0` or `#D9DED9` as the primary background color for a light, airy, and clean canvas.

text

For optimal readability, use a dark charcoal or black text on lighter backgrounds like `#F0F3F0` or `#D9DED9`.

Accessibility notes

Ensure `#5D6D5D` text on `#F0F3F0` backgrounds meets WCAG contrast standards for clear legibility.
Avoid pairing `#D9DED9` with `#F0F3F0` for text, as the contrast will be insufficient.
Use a contrast checker for text in `#8A9B8A` on `#D9DED9` backgrounds to ensure adequate visibility.
Consider using larger font sizes or bolding for text elements on mid-tone backgrounds like `#B3C1B3`.

Recommended combinations

Zen Base

Creates a soft, layered background, perfect for clean content areas and a sense of spaciousness.

#F0F3F0 · #D9DED9 · #B3C1B3

Garden Depth

Ideal for establishing clear visual hierarchy, with darker green elements against a light, airy backdrop.

#5D6D5D · #8A9B8A · #F0F3F0

Muted Greenery

Perfect for subtle gradients, section dividers, or background textures that require a gentle color shift.

#8A9B8A · #B3C1B3 · #D9DED9

CSS variables

:root {
  --pebble-zen-garden-1: #5D6D5D;
  --pebble-zen-garden-2: #8A9B8A;
  --pebble-zen-garden-3: #B3C1B3;
  --pebble-zen-garden-4: #D9DED9;
  --pebble-zen-garden-5: #F0F3F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pebble-zen-garden": {
        1: "#5D6D5D",
        2: "#8A9B8A",
        3: "#B3C1B3",
        4: "#D9DED9",
        5: "#F0F3F0",
      }
    }
  }
}

Hex values

Color 1#5D6D5D

Color 2#8A9B8A

Color 3#B3C1B3

Color 4#D9DED9

Color 5#F0F3F0

Accessibility

Contrast checker

1.9:1Fail

2.9:1Fail

4:1AA18

4.9:1AA

1.9:1Fail

1.6:1Fail

2.2:1Fail

2.6:1Fail

2.9:1Fail

1.6:1Fail

1.4:1Fail

1.7:1Fail

4:1AA18

2.2:1Fail

1.4:1Fail

1.2:1Fail

4.9:1AA

2.6:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Pebble Zen Garden

Smooth Pebble Gradient